wait for transition end before rendering status context + review fix + context loading fix

components/account/AccountHeader.vue

@@ -12,7 +12,7 @@ const { t } = useI18n()
 
 provide(viewTransitionAccountInjectionKey, account)
 
-const createdAt = useFormattedDateTime(() => account.creaedAt, { // TODO: typo
+const createdAt = useFormattedDateTime(() => account.createdAt, {
   month: 'long',
   day: 'numeric',
   year: 'numeric',

composables/view-transition.ts

@@ -1,4 +1,5 @@
 import type { mastodon } from 'masto'
+import type { ViewTransition } from '#app/plugins/view-transitions.client'
 
 interface ViewTransitionSources {
   status?: mastodon.v1.Status
@@ -14,6 +15,10 @@ function getViewTransitionState() {
   return useState<null | ViewTransitionState>('viewTransitionTargets', () => null)
 }
 
+export function getIsViewTransitionFinished() {
+  return useState<boolean>('isVewTransitionFinished', () => true)
+}
+
 export const viewTransitionEnabledInjectionKey: InjectionKey<boolean> = Symbol('whether view-transition is enabled for this component')
 export const viewTransitionStatusInjectionKey: InjectionKey<undefined | mastodon.v1.Status> = Symbol('the status in context')
 export const viewTransitionAccountInjectionKey: InjectionKey<undefined | mastodon.v1.Account> = Symbol('the account in context')

pages/[[server]]/@[account]/[status].vue

@@ -26,17 +26,18 @@ const { data: context, pending: pendingContext, refresh: refreshContext } = useA
   { watch: [isHydrated], immediate: isHydrated.value, lazy: true, default: () => shallowRef() },
 )
 
-if (pendingContext)
-  watchOnce(pendingContext, scrollTo)
-
 if (pending) {
   watchOnce(pending, () => {
     setViewTransitionTarget({ status: status.value })
-
     scrollTo()
   })
 }
 
+const viewTransitionFinished = getIsViewTransitionFinished()
+const contextReady = computed(() => !pendingContext.value && viewTransitionFinished.value)
+if (!contextReady.value)
+  watchOnce(contextReady, scrollTo)
+
 async function scrollTo() {
   await nextTick()
 
@@ -74,7 +75,7 @@ onReactivated(() => {
     <template v-if="!pending">
       <template v-if="status">
         <div xl:mt-4 mb="50vh" border="b base">
-          <template v-if="!pendingContext">
+          <template v-if="contextReady">
             <StatusCard
               v-for="(comment, i) of context?.ancestors" :key="comment.id"
               :status="comment" :actions="comment.visibility !== 'direct'" context="account"
@@ -99,7 +100,7 @@ onReactivated(() => {
             @published="refreshContext()"
           />
 
-          <template v-if="!pendingContext">
+          <template v-if="contextReady">
             <DynamicScroller
               v-slot="{ item, index, active }"
               :items="context?.descendants || []"
@@ -121,13 +122,17 @@ onReactivated(() => {
               </DynamicScrollerItem>
             </DynamicScroller>
           </template>
+
+          <TimelineSkeleton v-else />
         </div>
       </template>
 
       <StatusNotFound v-else :account="route.params.account as string" :status="id" />
     </template>
 
-    <StatusCardSkeleton v-else border="b base" />
-    <TimelineSkeleton v-if="pending || pendingContext" />
+    <template v-else>
+      <StatusCardSkeleton border="b base" />
+      <TimelineSkeleton />
+    </template>
   </MainContent>
 </template>

plugins/view-transition.ts

@@ -0,0 +1,9 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('page:view-transition:start', (transition) => {
+    const viewTransitionFinished = getIsViewTransitionFinished()
+    viewTransitionFinished.value = false
+
+    transition.finished
+      .then(() => viewTransitionFinished.value = true)
+  })
+})