feat: enhance media tab with user-specific no media messages and loading states

Author: AhmedAmrNabil

app/pages/profile/[username]/media.vue

@@ -10,6 +10,11 @@ definePageMeta({
 
 const user = inject<ComputedRef<User>>('user-data');
 const isBlockedBy = computed(() => user?.value.relationship.blockedBy || false);
+const userStore = useUserStore();
+
+const isCurrentUser = computed(() => {
+  return userStore.user?.username === user?.value.username;
+});
 
 const {
   data: response,
@@ -71,21 +76,30 @@ onServerPrefetch(async () => {
             </div>
           </template>
         </VirtualInfiniteScroller>
-      </ClientOnly>
-    </div>
 
-    <div
-      v-if="(hasNextPage && isFetchingNextPage) || isLoading"
-      class="text-primary flex shrink-0 items-center justify-center py-4"
-    >
-      <UiSpinner />
+        <div
+          v-if="(hasNextPage && isFetchingNextPage) || isLoading"
+          class="text-primary flex shrink-0 items-center justify-center py-4"
+        >
+          <UiSpinner />
+        </div>
+      </ClientOnly>
     </div>
-    <div
-      v-if="tweets.length === 0 && !isFetchingNextPage && !isLoading"
-      data-testid="empty-state"
-      class="text-muted-foreground mt-10 text-center"
-    >
-      <h1 class="text-xl font-semibold">{{ $t('testing.tweets.tweet-not-found') }}</h1>
+    <div v-if="!isLoading && tweets.length === 0" class="mx-auto my-10 max-w-90 px-8 text-start">
+      <h2 class="text-[2rem] leading-tight font-black">
+        {{
+          isCurrentUser
+            ? $t('profile.media.current-user-no-media.title')
+            : $t('profile.media.no-media.title', { username: user?.username || '' })
+        }}
+      </h2>
+      <p class="text-muted-foreground leading-tight">
+        {{
+          isCurrentUser
+            ? $t('profile.media.current-user-no-media.description')
+            : $t('profile.media.no-media.description')
+        }}
+      </p>
     </div>
   </div>
 </template>

i18n/locales/en.json

@@ -106,6 +106,16 @@
           "description": "When someone follows this account, they'll show up here. Posting and interacting with others helps boost followers."
         }
       }
+    },
+    "media": {
+      "no-media": {
+        "title": "{'@'}{username} hasn't posted media",
+        "description": "Once they do, those posts will show up here."
+      },
+      "current-user-no-media": {
+        "title": "Lights, camera … attachments!",
+        "description": "When you post photos or videos, they will show up here."
+      }
     }
   },
   "home": {