✨ Implement skeleton loading for better UI

Open-Webtoon-Reader · Jun 17, 2024 · 4c2fa9e · 4c2fa9e
1 parent e8b8259
commit 4c2fa9e
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 3 deletions.
diff --git a/components/webtoons/episodes/EpisodeList.vue b/components/webtoons/episodes/EpisodeList.vue
@@ -2,6 +2,8 @@
 import {ref, onMounted} from "vue";
 import {getEpisodes, getWebtoon} from "~/utils/api";
 import EpisodeItem from "~/components/webtoons/episodes/EpisodeItem.vue";
+import {Skeleton} from "~/components/ui/skeleton";
+import EpisodeSkeleton from "~/components/webtoons/episodes/EpisodeSkeleton.vue";
 
 const title = ref("");
 const episodes = ref<any[]>([]);
@@ -29,14 +31,19 @@ onMounted(() => {
 <template>
     <div class="h-full w-full md:w-3/4 lg:w-1/2 2xl:w-1/3 border-x-[1px]">
         <div id="header" class="flex gap-4 py-4 px-10 justify-center">
-            <h4>{{ title }}</h4>
+            <h4 v-if="title">{{ title }}</h4>
+            <Skeleton v-else class="w-1/2 h-8"/>
         </div>
+        <Separator/>
         <div id="content" class="h-full overflow-y-scroll">
-            <div v-for="episode in episodes" :key="episode.id">
+            <div v-if="!episodes.length">
+                <EpisodeSkeleton/>
                 <Separator/>
+            </div>
+            <div v-for="episode in episodes" :key="episode.id">
                 <EpisodeItem :episode="episode"/>
+                <Separator/>
             </div>
-            <Separator/>
         </div>
     </div>
 </template>

diff --git a/components/webtoons/episodes/EpisodeSkeleton.vue b/components/webtoons/episodes/EpisodeSkeleton.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+import {Skeleton} from "~/components/ui/skeleton";
+</script>
+
+<template>
+    <div id="main" class="flex items-center">
+        <Skeleton class="aspect-square h-20 sm:h-24 md:h-28 xl:h-32"/>
+        <div id="infos" class="flex items-center w-full justify-between pl-2 pr-4 h-20 sm:h-24 md:h-28 xl:h-32">
+            <div id="text-infos" class="flex flex-col w-full h-full justify-center">
+                <div class="flex flex-row justify-between items-center">
+                    <div id="title" class="flex flex-row gap-2">
+                        <Skeleton class="w-14 h-4"/>
+                    </div>
+                    <div id="number">
+                        <Skeleton class="w-6 h-4"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/components/webtoons/webtoons/WebtoonList.vue b/components/webtoons/webtoons/WebtoonList.vue
@@ -2,6 +2,7 @@
 import {ref, computed, onMounted} from "vue";
 import {getWebtoons} from "~/utils/api";
 import WebtoonItem from "~/components/webtoons/webtoons/WebtoonItem.vue";
+import WebtoonSkeleton from "~/components/webtoons/webtoons/WebtoonSkeleton.vue";
 
 const search = ref("");
 const webtoons = ref<any[]>([]);
@@ -45,6 +46,10 @@ const filteredWebtoons = computed(() => {
         </div>
         <Separator/>
         <div id="content" class="h-full overflow-y-scroll">
+            <div v-if="!webtoons.length">
+                <WebtoonSkeleton/>
+                <Separator/>
+            </div>
             <div v-for="webtoon in filteredWebtoons" :key="webtoon.id">
                 <WebtoonItem :webtoon="webtoon"/>
                 <Separator/>

diff --git a/components/webtoons/webtoons/WebtoonSkeleton.vue b/components/webtoons/webtoons/WebtoonSkeleton.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+
+import {Skeleton} from "~/components/ui/skeleton";
+</script>
+
+<template>
+    <div id="main" class="flex items-center">
+        <Skeleton class="aspect-square h-20 sm:h-24 md:h-28 xl:h-32"/>
+        <div id="infos" class="flex items-center w-full justify-between px-2  h-20 sm:h-24 md:h-28 xl:h-32">
+            <div id="text-infos" class="flex flex-col justify-between gap-auto h-full py-1 sm:py-2">
+                <div class="flex flex-col gap-0 md:gap-1 lg:gap-2">
+                    <div id="title" class="flex flex-row gap-2">
+                        <Skeleton class="w-64 h-6"/>
+                    </div>
+                    <Skeleton class="w-16 h-4"/>
+                </div>
+                <Skeleton class="w-8 h-4"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>