fix: use lazy pagination (#563)

app.vue

@@ -13,8 +13,7 @@ const { params } = useRoute()
 <template>
   <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 />
-    <NuxtPage v-if="(!params.account && $route.path !== '/signin/callback') || isMastoInitialised" />
   </NuxtLayout>
   <AriaAnnouncer />
 </template>

composables/paginator.ts

@@ -3,7 +3,7 @@ import { useDeactivated } from './lifecycle'
 import type { PaginatorState } from '~/types'
 
 export function usePaginator<T>(paginator: Paginator<any, T[]>, stream?: WsEvents, eventType: 'notification' | 'update' = 'update') {
-  const state = ref<PaginatorState>('idle')
+  const state = ref<PaginatorState>(isMastoInitialised.value ? 'idle' : 'loading')
   const items = ref<T[]>([])
   const nextItems = ref<T[]>([])
   const prevItems = ref<T[]>([])
@@ -74,6 +74,13 @@ export function usePaginator<T>(paginator: Paginator<any, T[]>, stream?: WsEvent
       bound.update()
     }, 1000)
 
+    if (!isMastoInitialised.value) {
+      watchOnce(isMastoInitialised, () => {
+        state.value = 'idle'
+        loadNext()
+      })
+    }
+
     watch(
       () => [isInScreen, state],
       () => {

composables/users.ts

@@ -294,6 +294,17 @@ export const createMasto = () => {
       if (!api.value) {
         return new Proxy({}, {
           get(_, subkey) {
+            if (typeof subkey === 'string' && subkey.startsWith('iterate')) {
+              return (...args: any[]) => {
+                let paginator: any
+                function next() {
+                  paginator = paginator || (api.value as any)?.[key][subkey](...args)
+                  return paginator.next()
+                }
+                return { next }
+              }
+            }
+
             return (...args: any[]) => apiPromise.value?.then((r: any) => r[key][subkey](...args))
           },
         })

middleware/auth.ts

@@ -1,7 +1,20 @@
 export default defineNuxtRouteMiddleware((to) => {
   if (process.server)
     return
-  if (!currentUser.value && to.path !== '/signin/callback')
+  if (to.path === '/signin/callback')
+    return
+
+  if (!isMastoInitialised.value) {
+    watchOnce(isMastoInitialised, () => {
+      if (!currentUser.value)
+        return navigateTo(`/${currentServer.value}/public`)
+      if (to.path === '/')
+        return navigateTo('/home')
+    })
+    return
+  }
+
+  if (!currentUser.value)
     return navigateTo(`/${currentServer.value}/public`)
   if (to.path === '/')
     return navigateTo('/home')