Preloader for tab list and by days

Author: Stigmatoz

src/assets/css/main.css

@@ -28,6 +28,7 @@ body {
     text-align: center;
     font-size: 16px;
     font-weight: 600;
+    margin-top: 30%;
 }
 .tabs {
 }

src/assets/icons/preloader.gif

@@ -1,25 +1,30 @@
 <template>
-  <div class="no-data" v-if="countOfDays == undefined || countOfDays == 0">No data</div>
+  <div class="no-data" v-if="isLoading">
+    <img height="55" src="../assets/icons/preloader.gif" />
+  </div>
   <div v-else>
-    <div class="stats-block block">
-      <div class="header">Average time on selected days</div>
-      <p>{{ convertSummaryTimeToString(tabsByDays.averageTime) }}</p>
-    </div>
-    <ByDaysChart :data="tabsByDays" />
-    <div>
-      <Expander
-        v-for="(tabDay, i) of tabsByDays?.days"
-        :key="i"
-        :day="tabDay.day"
-        :time="tabDay.time"
-      >
-        <TabItem
-          v-for="(tab, i) of tabDay.tabs"
+    <div class="no-data" v-if="countOfDays == undefined || countOfDays == 0">No data</div>
+    <div v-else>
+      <div class="stats-block block">
+        <div class="header">Average time on selected days</div>
+        <p>{{ convertSummaryTimeToString(tabsByDays.averageTime) }}</p>
+      </div>
+      <ByDaysChart :data="tabsByDays" />
+      <div>
+        <Expander
+          v-for="(tabDay, i) of tabsByDays?.days"
           :key="i"
-          :item="tab"
-          :summaryTimeForWholeDay="tabDay.time"
-        />
-      </Expander>
+          :day="tabDay.day"
+          :time="tabDay.time"
+        >
+          <TabItem
+            v-for="(tab, i) of tabDay.tabs"
+            :key="i"
+            :item="tab"
+            :summaryTimeForWholeDay="tabDay.time"
+          />
+        </Expander>
+      </div>
     </div>
   </div>
 </template>
@@ -40,16 +45,19 @@ import { useTabListByDays } from '../compositions/tab-list-by-days';
 import { convertSummaryTimeToString } from '../utils/converter';
 
 const tabsByDays = ref<TabListByDays>();
+const isLoading = ref<boolean>();
 
 const countOfDays = computed(() =>
   tabsByDays.value != undefined ? tabsByDays.value.days.length : 0,
 );
 
 async function loadList() {
-  tabsByDays.value = await useTabListByDays(new Date('06/01/2023'), new Date('06/14/2023'));
+  tabsByDays.value = await useTabListByDays(new Date('06/03/2023'), new Date('06/14/2023'));
+  isLoading.value = false;
 }
 
 onMounted(async () => {
+  isLoading.value = true;
   await loadList();
 });
 </script>

src/assets/icons/preloader.svg

@@ -1,26 +1,31 @@
 <template>
-  <div class="no-data" v-if="countOfSites == undefined || countOfSites == 0">No data</div>
+  <div class="no-data" v-if="isLoading">
+    <img height="55" src="../assets/icons/preloader.gif" />
+  </div>
   <div v-else>
-    <OverallStatistics v-if="isShowOverallStats" :data="dataForOvarallStats" />
-    <DonutChart :time="timeForChart" :labels="sitesForChart" />
-    <TabItemHeader
-      :listType="type"
-      :summaryTime="summaryTime"
-      :countOfSites="countOfSites"
-      :firstDay="firstDay"
-      :countOfActiveDays="countOfActiveDays"
-      @sortingBy="sorting"
-    />
-
-    <TabItem
-      v-for="(tab, i) of tabs"
-      :key="i"
-      :item="getItem(tab)"
-      :summaryTimeForWholeDay="summaryTime"
-    />
-
-    <div class="show-all" v-if="showOnlyFirst100Items">
-      <button @click="showAllWebSites()">Show all websites</button>
+    <div class="no-data" v-if="countOfSites == undefined || countOfSites == 0">No data</div>
+    <div v-else>
+      <OverallStatistics v-if="isShowOverallStats" :data="dataForOvarallStats" />
+      <DonutChart :time="timeForChart" :labels="sitesForChart" />
+      <TabItemHeader
+        :listType="type"
+        :summaryTime="summaryTime"
+        :countOfSites="countOfSites"
+        :firstDay="firstDay"
+        :countOfActiveDays="countOfActiveDays"
+        @sortingBy="sorting"
+      />
+
+      <TabItem
+        v-for="(tab, i) of tabs"
+        :key="i"
+        :item="getItem(tab)"
+        :summaryTimeForWholeDay="summaryTime"
+      />
+
+      <div class="show-all" v-if="showOnlyFirst100Items">
+        <button @click="showAllWebSites()">Show all websites</button>
+      </div>
     </div>
   </div>
 </template>
@@ -64,6 +69,7 @@ const firstDay = ref<Date>();
 const countOfActiveDays = ref<number>();
 
 const countOfSites = computed(() => (tabs.value != undefined ? tabs.value.length : 0));
+const isLoading = ref<boolean>();
 
 const showOnlyFirst100Items = ref<boolean>();
 
@@ -94,6 +100,8 @@ async function loadList(sortingBy: SortingBy) {
       tabs.value = tabSummary.tabs.slice(0, 100);
     } else showOnlyFirst100Items.value = false;
   }
+
+  isLoading.value = false;
 }
 
 async function sorting(sortingBy: SortingBy) {
@@ -123,6 +131,7 @@ function getItem(tab: Tab): CurrentTabItem {
 }
 
 onMounted(async () => {
+  isLoading.value = true;
   await loadList(SortingBy.UsageTime);
 });
 </script>