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
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user