Resolve "Flickering images on route change on single post page"

Closes #435 (closed)

apps/blog/pages/[param]/[p2]/[permlink]/index.tsx

@@ -72,6 +72,7 @@ function PostPage({
   } = useFollowListQuery(user.username, 'muted');
 
   const {
+    isRefetching: isRefetchingPost,
     isLoading: isLoadingPost,
     error: errorPost,
     data: post
@@ -80,6 +81,8 @@ function PostPage({
     onSuccess: (post) => setMutedPost(!!post?.stats?.gray)
   });
 
+  // logger.info('isLoadingPost: %s, isRefetchingPost: %s, post.author: %s', isLoadingPost, isRefetchingPost, post?.author);
+
   const {
     isLoading: isLoadingDiscussion,
     error: errorDiscussion,
@@ -205,7 +208,7 @@ function PostPage({
             <Icons.flag className="absolute right-0 m-2 hover:text-red-500" />
           </AlertDialogFlag>
         ) : null}
-        {!isLoadingPost && post ? (
+        {!isLoadingPost && !isRefetchingPost && post ? (
           <div>
             {!commentSite ? (
               <h1 className="text-3xl font-bold" data-testid="article-title">
@@ -251,8 +254,8 @@ function PostPage({
 
             <hr />
 
-            {mutedPost === undefined || isLoadingPost ? (
-              <Loading loading={mutedPost === undefined || isLoadingPost} />
+            {mutedPost === undefined || isLoadingPost || isRefetchingPost ? (
+              <Loading loading={mutedPost === undefined || isLoadingPost || isRefetchingPost } />
             ) : edit ? (
               <PostForm
                 username={username}