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

design: more confortable skeleton

Browse Source
This commit is contained in:
Julien Calixte
2026-01-04 22:01:48 +01:00
parent a97bbf9352
commit 6894d84834
2 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/FluxNote.vue
View File

@@ -20,6 +20,7 @@ import CacheAllNotes from "@/modules/note/components/CacheAllNote.vue"
import { useUserRepoStore } from "@/modules/repo/store/userRepo.store" import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
import { useUserSettings } from "@/modules/user/hooks/useUserSettings.hook" import { useUserSettings } from "@/modules/user/hooks/useUserSettings.hook"
import { useRoute } from "vue-router" import { useRoute } from "vue-router"
import SkeletonLoader from "@/components/SkeletonLoader.vue"
const HeaderNote = defineAsyncComponent( const HeaderNote = defineAsyncComponent(
() => import("@/components/HeaderNote.vue"), () => import("@/components/HeaderNote.vue"),
@@ -113,19 +114,7 @@ onUnmounted(() => {
<cache-all-notes /> <cache-all-notes />
</div> </div>
<slot /> <slot />
<div <skeleton-loader v-if="isLoading || !hasContent" />
v-if="isLoading || !hasContent"
class="flex w-full flex-col gap-4 mt-12"
>
<div class="skeleton h-4 w-32 mb-2"></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-full"></div>
<div class="skeleton h-4 w-44"></div>
</div>
<p <p
v-else-if="withContent" v-else-if="withContent"
class="note-display" class="note-display"

13
src/components/SkeletonLoader.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="flex w-full flex-col gap-4 mt-12">
<div class="skeleton h-4 w-32 mb-2"></div>
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-4 w-44"></div>
<br />
<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-22"></div>
</div>
</template>