From 7099f5598265998394dc58f1e7c734e1a666b29e Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Thu, 30 Jun 2022 09:11:10 -0300
Subject: [PATCH] Only shows spinner when no loading is happening. #11

---
 src/pages/CollectionPage.vue | 29 ++++++++++++++++-------------
 src/pages/ItemsPage.vue      | 12 +++++++++---
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/pages/CollectionPage.vue b/src/pages/CollectionPage.vue
index a68757a..83a18b8 100644
--- a/src/pages/CollectionPage.vue
+++ b/src/pages/CollectionPage.vue
@@ -13,9 +13,9 @@
             :message="$t('label_loading')"
         >
         </ion-loading>
-        <ion-spinner v-if="isSearching" name="bubbles"></ion-spinner>
+        <ion-spinner v-if="isSearching"></ion-spinner>
         <div 
-            v-if="!isSearching && (!tainacanStore.totalCollectionItems || tainacanStore.totalCollectionItems == '0')" 
+            v-if="!isLoading && !isSearching && (!tainacanStore.totalCollectionItems || tainacanStore.totalCollectionItems == '0')" 
             class="results-not-found"
         >
             <span> {{$t('label_no_results_found')}} </span>
@@ -196,15 +196,18 @@ export default defineComponent({
 </script>
 
 <style>
-.add-items-button {
-    position: fixed;
-    bottom: 16px;
-    right: 16px;
-    height: 52px;
-    --padding-start: 24px;
-    --padding-bottom: 16px;
-    --padding-top: 16px;
-    --padding-end: 24px;
-    --border-radius: 18px;
-}
+    .add-items-button {
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        height: 52px;
+        --padding-start: 24px;
+        --padding-bottom: 16px;
+        --padding-top: 16px;
+        --padding-end: 24px;
+        --border-radius: 18px;
+    }
+    ion-spinner {
+        margin-top: 2rem;
+    }
 </style>
\ No newline at end of file
diff --git a/src/pages/ItemsPage.vue b/src/pages/ItemsPage.vue
index 027dacf..25bd944 100644
--- a/src/pages/ItemsPage.vue
+++ b/src/pages/ItemsPage.vue
@@ -11,8 +11,8 @@
         <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
             <ion-refresher-content></ion-refresher-content>
         </ion-refresher>
-        <ion-spinner v-if="isSearching" name="bubbles"></ion-spinner>
-        <div v-if="!isSearching && (!tainacanStore.totalItems || tainacanStore.totalItems == '0')" class="results-not-found">
+        <ion-spinner v-if="isSearching"></ion-spinner>
+        <div v-if="!isLoading && !isSearching && (!tainacanStore.totalItems || tainacanStore.totalItems == '0')" class="results-not-found">
             <span> {{$t('label_no_results_found')}} </span>
         </div>
         <items-list :items="tainacanStore.items"></items-list>
@@ -111,4 +111,10 @@ export default {
         this.setIsLoading(false)
     },
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+    ion-spinner {
+        margin-top: 2rem;
+    }
+</style>
\ No newline at end of file