Onboarding tweaks (#272)

* Small fix to side menu rendering

* Change onboarding to use an explicit 'is onboarding' mode to more clearly control the flow

* Add a progress bar to the welcome banner

* Dont show the 'unfollow button' on posts in weird times (close #271)

* Improve the empty state of the feed

* Only suggest recent posts

1 files changed, 12 insertions, 10 deletions

diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index af08708b4..cde5a3e92 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -24,20 +24,18 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
   let handle = opts.authorHandle
   const store = useStores()
   const isMe = opts.did === store.me.did
+  const isFollowing =
+    typeof opts.did === 'string' && store.me.follows.isFollowing(opts.did)
 
-  // NOTE we capture `isFollowing` via a memo so that follows
-  //      don't change this UI immediately, but rather upon future
-  //      renders
-  const isFollowing = React.useMemo(
-    () =>
-      typeof opts.did === 'string' && store.me.follows.isFollowing(opts.did),
-    [opts.did, store.me.follows],
-  )
+  const [didFollow, setDidFollow] = React.useState(false)
+  const onToggleFollow = React.useCallback(() => {
+    setDidFollow(true)
+  }, [setDidFollow])
 
   if (
     opts.showFollowBtn &&
     !isMe &&
-    !isFollowing &&
+    (!isFollowing || didFollow) &&
     opts.did &&
     opts.declarationCid
   ) {
@@ -71,7 +69,11 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
         </View>
 
         <View>
-          <FollowButton did={opts.did} declarationCid={opts.declarationCid} />
+          <FollowButton
+            did={opts.did}
+            declarationCid={opts.declarationCid}
+            onToggleFollow={onToggleFollow}
+          />
         </View>
       </View>
     )