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,
)
const hasContent = computed(() => !!renderedContent.value)
const isLoading = computed(() => renderedContent.value === undefined)
const hasContent = computed(() => !!renderedContent.value)
watch(
renderedContent,
async () => {
console.log(renderedContent.value)
await nextTick()
listenToClick()
},
@@ -112,7 +114,15 @@ onUnmounted(() => {
</div>
<slot />
<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
v-else-if="withContent"
class="note-display"