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

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>

tests/unit/Lists.spec.js

@@ -0,0 +1,51 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import Vuetify from 'vuetify';
+import Vuex from 'vuex';
+import flushPromises from 'flush-promises';
+import Lists from '@/views/List.vue';
+
+jest.mock('../../src/firebase.js');
+
+const localVue = createLocalVue();
+const vuetify = new Vuetify();
+const $route = { params: { slug: 'list123' } };
+
+localVue.use(Vuex);
+
+const localStore = new Vuex.Store({
+  state: {
+    currentUser: {
+      avatar: '/img/unknown_user.svg', // when we set the user in the store, we default to this.
+      displayName: null,
+      email: '[email protected]',
+      emailVerified: false,
+      uid: 'UUID123456',
+      useGravatar: false,
+    },
+  },
+  actions: {
+    fetchLists: () => ([{id: 1},{id: 2}]);
+  }
+});
+
+describe('Lists.vue', () => {
+  describe('when given an empty list', () => {
+    let wrapper;
+    beforeEach(async () => {
+      const lists = [{ id: '1', data: () => ({ title: 'list123' }) }];
+      wrapper = mount(Lists, {
+        localVue,
+        vuetify,
+        store: localStore,
+        mocks: {
+          $route,
+        },
+      });
+      await flushPromises(); // for fetchList() call in List.mounted()
+    });
+    it.todo('should show loader while loading the lists');
+    it.todo('should show the add list dialog when there are no lists');
+
+    it.todo('should show the list cards for each list');
+  });
+});