remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add skeleton on no content that looks like loading

Browse Source
This commit is contained in:
Julien Calixte
2025-11-29 13:24:07 +01:00
parent 80f4f39006
commit 10dcd8717a
1 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/FluxNote.vue
View File

@@ -63,12 +63,14 @@ const renderedContent = computed(() =>
: store.readme, : store.readme,
) )
const hasContent = computed(() => !!renderedContent.value)
const isLoading = computed(() => renderedContent.value === undefined) const isLoading = computed(() => renderedContent.value === undefined)
const hasContent = computed(() => !!renderedContent.value)
watch( watch(
renderedContent, renderedContent,
async () => { async () => {
console.log(renderedContent.value)
await nextTick() await nextTick()
listenToClick() listenToClick()
}, },
@@ -112,7 +114,15 @@ onUnmounted(() => {
</div> </div>
<slot /> <slot />
<lite-loading v-if="isLoading" /> <lite-loading v-if="isLoading" />
<div v-else-if="!hasContent">No content here 📝</div> <div v-else-if="!hasContent" class="flex w-full flex-col gap-4">
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-28"></div>
</div>
<p <p
v-else-if="withContent" v-else-if="withContent"
class="note-display" class="note-display"