From 84ea17e0cf7b8df4f02633d3bd513a90dd2e5667 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 22 Dec 2022 21:25:46 +0100
Subject: [PATCH] feat: improve explore loading

---
 app.vue                               |  2 +-
 components/common/CommonRouteTabs.vue | 28 +++++++++++++++++----------
 pages/[[server]]/explore.vue          | 14 +++++---------
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/app.vue b/app.vue
index ad38e055..6bb6396c 100644
--- a/app.vue
+++ b/app.vue
@@ -13,7 +13,7 @@ const { params } = useRoute()
   <NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
   <NuxtLayout :key="key">
     <!-- TODO: rework the /[account] routes to remove conditional loading -->
-    <NuxtPage v-if="!params.server || isMastoInitialised" />
+    <NuxtPage v-if="!params.account || isMastoInitialised" />
   </NuxtLayout>
   <PWAPrompt />
 </template>
diff --git a/components/common/CommonRouteTabs.vue b/components/common/CommonRouteTabs.vue
index 65d8864b..d596b889 100644
--- a/components/common/CommonRouteTabs.vue
+++ b/components/common/CommonRouteTabs.vue
@@ -5,6 +5,7 @@ const { options, command, replace, preventScrollTop = false } = $defineProps<{
   options: {
     to: RouteLocationRaw
     display: string
+    disabled?: boolean
     name?: string
     icon?: string
   }[]
@@ -28,18 +29,25 @@ useCommands(() => command
 
 <template>
   <div flex w-full items-center lg:text-lg of-x-auto scrollbar-hide>
-    <NuxtLink
+    <template
       v-for="(option, index) in options"
       :key="option?.name || index"
-      :to="option.to"
-      :replace="replace"
-      relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
-      tabindex="1"
-      hover:bg-active transition-100
-      exact-active-class="children:(font-bold !border-primary !op100)"
-      @click="!preventScrollTop && $scrollToTop()"
     >
-      <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center border-b-3 op50 hover:op70 border-transparent>{{ option.display }}</span>
-    </NuxtLink>
+      <NuxtLink
+        v-if="!option.disabled"
+        :to="option.to"
+        :replace="replace"
+        relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
+        tabindex="1"
+        hover:bg-active transition-100
+        exact-active-class="children:(text-secondary !border-primary !op100)"
+        @click="!preventScrollTop && $scrollToTop()"
+      >
+        <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display }}</span>
+      </NuxtLink>
+      <div v-else flex flex-auto sm:px6 px2>
+        <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
+      </div>
+    </template>
   </div>
 </template>
diff --git a/pages/[[server]]/explore.vue b/pages/[[server]]/explore.vue
index 1c139d2a..ca3446a7 100644
--- a/pages/[[server]]/explore.vue
+++ b/pages/[[server]]/explore.vue
@@ -17,15 +17,11 @@ const tabs = $computed(() => [
     display: t('tab.news'),
   },
   // This section can only be accessed after logging in
-  ...invoke(() => currentUser.value
-    ? [
-        {
-          to: `/${currentServer.value}/explore/users`,
-          display: t('tab.for_you'),
-        },
-      ]
-    : [],
-  ),
+  {
+    to: `/${currentServer.value}/explore/users`,
+    display: t('tab.for_you'),
+    disabled: !isMastoInitialised.value || !currentUser.value,
+  },
 ] as const)
 </script>