From 4e79246df30b86d07b548fe95df83b1964855c24 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 26 Dec 2022 15:14:48 +0100
Subject: [PATCH] fix: defer loading accounts/tags until masto is initialised

---
 pages/[[server]]/@[account]/[status].vue | 7 ++++---
 pages/[[server]]/@[account]/index.vue    | 5 +++--
 pages/[[server]]/tags/[tag].vue          | 2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
index 085476cb..1098d12d 100644
--- a/pages/[[server]]/@[account]/[status].vue
+++ b/pages/[[server]]/@[account]/[status].vue
@@ -13,9 +13,10 @@ const main = ref<ComponentPublicInstance | null>(null)
 let bottomSpace = $ref(0)
 const publishWidget = ref()
 
-const { data: status, pending, refresh: refreshStatus } = useAsyncData(`status:${id}`, async () => (
-  window.history.state?.status as Status | undefined)
-  ?? await fetchStatus(id),
+const { data: status, pending, refresh: refreshStatus } = useAsyncData(
+  `status:${id}`,
+  async () => (window.history.state?.status as Status | undefined) ?? await fetchStatus(id),
+  { watch: [isMastoInitialised], immediate: isMastoInitialised.value },
 )
 const masto = useMasto()
 const { data: context, pending: pendingContext, refresh: refreshContext } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
diff --git a/pages/[[server]]/@[account]/index.vue b/pages/[[server]]/@[account]/index.vue
index 59bda25c..626172aa 100644
--- a/pages/[[server]]/@[account]/index.vue
+++ b/pages/[[server]]/@[account]/index.vue
@@ -8,7 +8,7 @@ const accountName = $(computedEager(() => toShortHandle(params.account as string
 
 const { t } = useI18n()
 
-const { data: account, refresh } = $(await useAsyncData(() => fetchAccountByHandle(accountName).catch(() => null)))
+const { data: account, pending, refresh } = $(await useAsyncData(() => fetchAccountByHandle(accountName).catch(() => null), { watch: [isMastoInitialised], immediate: isMastoInitialised.value }))
 const relationship = $computed(() => account ? useRelationship(account).value : undefined)
 
 onReactivated(() => {
@@ -24,7 +24,8 @@ onReactivated(() => {
       <span text-lg font-bold>{{ account ? getDisplayName(account) : t('nav_side.profile') }}</span>
     </template>
 
-    <template v-if="account">
+    <template v-if="pending" />
+    <template v-else-if="account">
       <AccountMoved v-if="account.moved" :account="account" />
       <AccountHeader :account="account" command border="b base" :class="{ 'op-50 grayscale-50': !!account.moved }" />
 
diff --git a/pages/[[server]]/tags/[tag].vue b/pages/[[server]]/tags/[tag].vue
index a1afe770..005d904b 100644
--- a/pages/[[server]]/tags/[tag].vue
+++ b/pages/[[server]]/tags/[tag].vue
@@ -3,7 +3,7 @@ const params = useRoute().params
 const tagName = $(computedEager(() => params.tag as string))
 
 const masto = useMasto()
-const { data: tag, refresh } = $(await useAsyncData(() => masto.tags.fetch(tagName)))
+const { data: tag, refresh } = $(await useAsyncData(() => masto.tags.fetch(tagName), { watch: [isMastoInitialised], immediate: isMastoInitialised.value }))
 
 const paginator = masto.timelines.iterateHashtag(tagName)
 const stream = await masto.stream.streamTagTimeline(tagName)