BUG: Inital Loading should have a loader instead of text.

Fixes #81
BizziQuest · Nov 26, 2021 · 7afdf0d · 7afdf0d
1 parent b401a3d
commit 7afdf0d
Showing 1 changed file with 35 additions and 14 deletions.
diff --git a/src/views/Lists.vue b/src/views/Lists.vue
@@ -1,22 +1,32 @@
 <template>
-  <v-container fluid class='lists-view'>
+  <v-container fluid class="lists-view">
     <transition-group tag="div" class="row" name="fade">
-      <v-col v-if="lists === null" key="skeleton" class='mt-5'>
-        <v-skeleton-loader v-for="i in 6" :key="i"
-          class="mx-auto"
-          max-width="800"
-          type="list-item-avatar, divider, list-item-three-line, card-heading, image, actions"
-        ></v-skeleton-loader>
-      </v-col>
-      <v-row v-if="lists && lists.length < 1" key="sad" class='ml-5 mr-5 mt-10'>
+      <v-row style="position: absolute; width: 100%" key="loader" class="align-content-center" v-if="isLoading">
+        <v-col v-for="i in 6" md="4" :key="i" class="d-flex align-stretch">
+          <v-skeleton-loader
+            class="mx-auto"
+            style="max-height: 200px; width: 100%"
+            type="card-heading,list-item-three-line"
+          ></v-skeleton-loader>
+        </v-col>
+      </v-row>
+      <v-row v-if="showNoListsInfo" key="sad" class="ml-5 mr-5 mt-10">
         <v-alert prominent icon="mdi-shield-plus-outline" type="info" class="col-12">
           Welcome to Quest Lists! You don't have any Quests yet, but have no fear, simply click on the
           <v-icon>mdi-shield-plus-outline</v-icon> icon on the left to get started!
         </v-alert>
       </v-row>
-      <v-col v-else v-for="list in lists" :key="list.id" md="4" sm="6" xs="12" class="d-flex align-stretch">
-        <ListCard :list="list"></ListCard>
-      </v-col>
+      <v-row style="position: absolute" key="content"  v-else>
+        <v-col
+          v-for="list in lists"
+          :key="list.id"
+          md="4"
+          sm="6"
+          class="d-flex align-stretch"
+        >
+          <ListCard :list="list"></ListCard>
+        </v-col>
+      </v-row>
     </transition-group>
   </v-container>
 </template>
@@ -30,14 +40,25 @@ export default {
   components: {
     ListCard,
   },
+  data: () => ({
+    isLoading: true,
+  }),
   methods: {
     ...mapActions(['fetchLists']),
   },
   computed: {
     ...mapState(['lists']),
+    showNoListsInfo() {
+      return !this.isLoading && this.lists.length < 1;
+    },
+    loaderNumber() {
+      return this.isLoading ? 3 : 0;
+    },
   },
   mounted() {
-    this.fetchLists();
+    this.fetchLists().then(() => {
+      this.isLoading = false;
+    });
   },
 };
 </script>
@@ -62,6 +83,6 @@ ul {
 
 .fade-enter,
 .fade-leave-active {
-  opacity: 0
+  opacity: 0;
 }
 </style>