From ddabe5082d00a427b7cedf5c2bd803da7dad2607 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Thu, 19 Mar 2026 18:12:52 +0100
Subject: [PATCH] feat: show skeleton loaders while ATProto identity resolves

- Show skeleton in PublicNoteView and StackedPublicNote while note
  content is pending author resolution
- Show skeleton h1 in PublicNoteListByDidView while author loads
- Show skeleton in SignInAtproto until auth state is known
- Load cached session from IndexedDB before OAuth restore so the
  homepage resolves immediately without waiting for network
---
 src/components/SignInAtproto.vue      |  7 ++++---
 src/components/StackedPublicNote.vue  |  4 +++-
 src/hooks/useATProtoLogin.hook.ts     | 11 ++++++-----
 src/views/PublicNoteListByDidView.vue |  6 ++++--
 src/views/PublicNoteView.vue          |  4 +++-
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/SignInAtproto.vue b/src/components/SignInAtproto.vue
index d71d706..ad545f1 100644
--- a/src/components/SignInAtproto.vue
+++ b/src/components/SignInAtproto.vue
@@ -3,7 +3,7 @@ import { ref } from "vue"
 
 import { useATProtoLogin } from "@/hooks/useATProtoLogin.hook"
 
-const { handle, isLoggedIn, signIn, signOut } = useATProtoLogin()
+const { handle, isLoggedIn, isATProtoReady, signIn, signOut } = useATProtoLogin()
 
 withDefaults(
   defineProps<{
@@ -24,13 +24,14 @@ const onSignIn = () => {
 </script>
 
 <template>
-  <div v-if="isLoggedIn" class="sign-in-atproto is-signed-in">
+  <div v-if="!isATProtoReady" class="skeleton h-8 w-40"></div>
+  <div v-else-if="isLoggedIn" class="sign-in-atproto is-signed-in">
     <span>{{ handle }}</span>
     <button class="btn btn-sm" @click="signOut" v-if="withSignOut">
       Sign out
     </button>
   </div>
-  <div v-else class="sign-in-atproto join">
+  <div v-else-if="!isLoggedIn" class="sign-in-atproto join">
     <input
       v-model="inputHandle"
       class="input input-sm join-item"
diff --git a/src/components/StackedPublicNote.vue b/src/components/StackedPublicNote.vue
index 2f12cbc..377838f 100644
--- a/src/components/StackedPublicNote.vue
+++ b/src/components/StackedPublicNote.vue
@@ -11,6 +11,7 @@ import { withATProtoImages } from "@/modules/atproto/withATProtoImages"
 import { getAuthor } from "@/modules/atproto/getAuthor"
 import { fromShortDid } from "@/modules/atproto/shortDid"
 import { PublicNoteRecord } from "@/modules/atproto/publicNote.types"
+import SkeletonLoader from "@/components/SkeletonLoader.vue"
 
 const props = defineProps<{
   didrkey: string
@@ -99,7 +100,8 @@ watch(
       <div v-if="noteNotFound" class="alert alert-error">
         This note no longer exists.
       </div>
-      <div class="note-content" v-else v-html="content"></div>
+      <div class="note-content" v-else-if="content" v-html="content"></div>
+      <skeleton-loader v-else-if="!noteNotFound" />
     </section>
   </div>
 </template>
diff --git a/src/hooks/useATProtoLogin.hook.ts b/src/hooks/useATProtoLogin.hook.ts
index f5cdbaf..7106592 100644
--- a/src/hooks/useATProtoLogin.hook.ts
+++ b/src/hooks/useATProtoLogin.hook.ts
@@ -10,8 +10,13 @@ const handle = ref<string | null>(null)
 let init = true
 
 const initializeAuth = async () => {
-  const session = await restoreSession()
+  // Load cached session from IndexedDB first (fast, local) so the UI can render immediately
+  const stored = await loadSession()
+  did.value = stored?.did ?? ''
+  handle.value = stored?.handle ?? ''
 
+  // Then restore OAuth session in the background (may involve network)
+  const session = await restoreSession()
   if (session) {
     const author = await getAuthor(session.did)
     const resolvedHandle = author?.handle ?? ''
@@ -21,10 +26,6 @@ const initializeAuth = async () => {
     await saveSession(session.did, resolvedHandle)
 
     window.history.replaceState(null, '', window.location.pathname + window.location.search)
-  } else {
-    const stored = await loadSession()
-    did.value = stored?.did ?? ''
-    handle.value = stored?.handle ?? ''
   }
 }
 
diff --git a/src/views/PublicNoteListByDidView.vue b/src/views/PublicNoteListByDidView.vue
index 992a592..2f1be53 100644
--- a/src/views/PublicNoteListByDidView.vue
+++ b/src/views/PublicNoteListByDidView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import HomeButton from "@/components/HomeButton.vue"
 import PublicNoteList from "@/components/PublicNoteList.vue"
+import SkeletonLoader from "@/components/SkeletonLoader.vue"
 import { usePublicNoteList } from "@/hooks/usePublicNoteList.hook"
 import { getAuthor } from "@/modules/atproto/getAuthor"
 import { fromShortDid } from "@/modules/atproto/shortDid"
@@ -19,9 +20,10 @@ const author = computedAsync(async () => getAuthor(did.value))
   <main class="public-note-list-view">
     <div class="header">
       <home-button class="back-button" />
-      <h1>{{ author?.handle ?? did }}</h1>
+      <h1 v-if="author">{{ author.handle }}</h1>
+      <div v-else class="skeleton h-8 w-40"></div>
     </div>
-    <div v-if="isLoading"></div>
+    <skeleton-loader v-if="isLoading" />
     <div v-else>
       <PublicNoteList
         :notes="notes"
diff --git a/src/views/PublicNoteView.vue b/src/views/PublicNoteView.vue
index 7579e7c..9faa14c 100644
--- a/src/views/PublicNoteView.vue
+++ b/src/views/PublicNoteView.vue
@@ -17,6 +17,7 @@ import { useRouter } from "vue-router"
 import { errorMessage } from "@/utils/notif"
 import { useResizeContainer } from "@/hooks/useResizeContainer.hook"
 import ThemeSwap from "@/components/ThemeSwap.vue"
+import SkeletonLoader from "@/components/SkeletonLoader.vue"
 import { useTitle } from "@vueuse/core"
 import { displayLanguage } from "@/utils/displayLanguage"
 
@@ -163,7 +164,8 @@ watch(
         >
       </div>
 
-      <article class="note-display" v-html="content"></article>
+      <article class="note-display" v-if="content" v-html="content"></article>
+      <skeleton-loader v-else-if="!noteNotFound" />
     </div>
     <stacked-public-note
       v-for="(stackedNote, index) in stackedNotes"