From 832bf7754b923694ab131289ecbb46939e04369d Mon Sep 17 00:00:00 2001
From: joycitta-siqueira <joycitta@gmail.com>
Date: Tue, 28 Jun 2022 10:46:02 -0300
Subject: [PATCH 1/5] Search on the collection items list

---
 src/locales/translation-strings.ts |  6 ++++--
 src/pages/CollectionPage.vue       | 34 ++++++++++++++++++++++++++----
 src/store/storeTainacan.ts         |  5 ++++-
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/locales/translation-strings.ts b/src/locales/translation-strings.ts
index a533af1..eb8129c 100644
--- a/src/locales/translation-strings.ts
+++ b/src/locales/translation-strings.ts
@@ -25,7 +25,8 @@ export const translationStrings = {
         label_option_multiple_items: 'Multiple items from file selection',
         label_option_multiple_attachments: 'Single item with document and attachments from file selection',
         label_option_single_item: 'Single empty item',
-        label_cancel: 'Cancel'
+        label_cancel: 'Cancel',
+        label_search: 'Search'
     },
     pt: {
         collections: "Coleções",
@@ -53,6 +54,7 @@ export const translationStrings = {
         label_option_multiple_items: 'Vários itens a partir de uma seleção de arquivos',
         label_option_multiple_attachments: 'Um item com documento e anexos provenientes de ums seleção de aquivos',
         label_option_single_item: 'Um item vazio',
-        label_cancel: 'Cancelar'
+        label_cancel: 'Cancelar',
+        label_search: 'Buscar'
     }
 }
\ No newline at end of file
diff --git a/src/pages/CollectionPage.vue b/src/pages/CollectionPage.vue
index e6bf6a2..439588c 100644
--- a/src/pages/CollectionPage.vue
+++ b/src/pages/CollectionPage.vue
@@ -5,6 +5,9 @@
         <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
             <ion-refresher-content></ion-refresher-content>
         </ion-refresher>
+        <ion-toolbar>
+             <ion-searchbar :placeholder="this.$t('label_search')" @ionChange="handleSearch($event)" @ionCancel="handleCancelSearch=($event)"></ion-searchbar>
+        </ion-toolbar>
         <ion-loading
             :is-open="isLoading"
             :message="$t('label_loading')"
@@ -38,7 +41,9 @@ import {
     IonIcon,
     IonButton,
     actionSheetController,
-    IonInfiniteScroll
+    IonInfiniteScroll,
+    IonToolbar,
+    IonSearchbar
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import ItemsList from '@/components/lists/ItemsList.vue';
@@ -51,7 +56,9 @@ export default defineComponent({
         IonRefresherContent,
         IonIcon,
         IonButton,
-        IonInfiniteScroll
+        IonInfiniteScroll,
+        IonToolbar,
+        IonSearchbar
     },
     props: {
         id: String,
@@ -59,16 +66,33 @@ export default defineComponent({
     },
     setup(props) {
         const isLoading = ref(false);
+        const search = ref();
         const infiniteScroll = ref();
         const setIsLoading = (state: boolean) => isLoading.value = state;
+        const setSearch = (value: string) => search.value = value;
         const loadItemsByCollection = async (event: any, reset: boolean) => {
-            let hasMoreCollections = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset});
+            let hasMoreCollections = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
             if (event && event.target)
                 event.target.complete();
             if (!hasMoreCollections){
                 infiniteScroll.value.$el.disabled = true;
             }
         }
+        const handleSearch = async (event: any) => {
+            let search = event && event.detail && event.detail.value;
+            if(search) {
+                setSearch(search);
+                await loadItemsByCollection(null, true);
+            } else {
+                setSearch('');
+            }
+        }
+        const handleCancelSearch = async (event: any) => {
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+            loadItemsByCollection(null, true);
+        }
         const doRefresh = async (event: any) => {
             await loadItemsByCollection({}, true);
             if (event && event.target){
@@ -137,7 +161,9 @@ export default defineComponent({
             actionSheetLabels,
             setActionSheetLabels,
             collectionObject,
-            infiniteScroll
+            infiniteScroll,
+            handleSearch,
+            handleCancelSearch
         }
     },
     async created() {
diff --git a/src/store/storeTainacan.ts b/src/store/storeTainacan.ts
index 586db0b..2caa64d 100644
--- a/src/store/storeTainacan.ts
+++ b/src/store/storeTainacan.ts
@@ -70,7 +70,7 @@ const useTainacanStore = defineStore("tainacan", {
       }
     },
 
-    async fetchItemsByCollection(collectionId: string, params: { perPage: string, orderBy: string, reset: boolean }) {
+    async fetchItemsByCollection(collectionId: string, params: { perPage: string, orderBy: string, reset?: boolean, search?: string }) {
       try {
         const wpStore = useWpStore();
 
@@ -85,6 +85,9 @@ const useTainacanStore = defineStore("tainacan", {
           endpoint += '&orderby=' + params.orderBy;
         else
           endpoint += '&orderby=modified';
+
+        if (params && params.search && params.search !== '')
+          endpoint += '&search=' + params.search
           
         if (params.reset) {
           this.collectionItems = [];

From 68882431551d882a5d71e96d243a2c66854d95aa Mon Sep 17 00:00:00 2001
From: joycitta-siqueira <joycitta@gmail.com>
Date: Tue, 28 Jun 2022 15:00:04 -0300
Subject: [PATCH 2/5] Search on the items list

---
 src/pages/CollectionPage.vue |  6 +++---
 src/pages/ItemsPage.vue      | 34 ++++++++++++++++++++++++++++++----
 src/store/storeTainacan.ts   |  5 ++++-
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/pages/CollectionPage.vue b/src/pages/CollectionPage.vue
index 439588c..0b7ff29 100644
--- a/src/pages/CollectionPage.vue
+++ b/src/pages/CollectionPage.vue
@@ -6,7 +6,7 @@
             <ion-refresher-content></ion-refresher-content>
         </ion-refresher>
         <ion-toolbar>
-             <ion-searchbar :placeholder="this.$t('label_search')" @ionChange="handleSearch($event)" @ionCancel="handleCancelSearch=($event)"></ion-searchbar>
+             <ion-searchbar :placeholder="$t('label_search')" @ionChange="handleSearch($event)" @ionCancel="handleCancelSearch($event)"></ion-searchbar>
         </ion-toolbar>
         <ion-loading
             :is-open="isLoading"
@@ -71,10 +71,10 @@ export default defineComponent({
         const setIsLoading = (state: boolean) => isLoading.value = state;
         const setSearch = (value: string) => search.value = value;
         const loadItemsByCollection = async (event: any, reset: boolean) => {
-            let hasMoreCollections = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
+            let hasMoreCollectionsItems = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
             if (event && event.target)
                 event.target.complete();
-            if (!hasMoreCollections){
+            if (!hasMoreCollectionsItems){
                 infiniteScroll.value.$el.disabled = true;
             }
         }
diff --git a/src/pages/ItemsPage.vue b/src/pages/ItemsPage.vue
index 9974bd6..5e91464 100644
--- a/src/pages/ItemsPage.vue
+++ b/src/pages/ItemsPage.vue
@@ -5,6 +5,9 @@
                 :message="$t('label_loading')"
         >
         </ion-loading>
+        <ion-toolbar>
+             <ion-searchbar :placeholder="$t('label_search')" @ionChange="handleSearch($event)" @ionCancel="handleCancelSearch($event)"></ion-searchbar>
+        </ion-toolbar>
         <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
             <ion-refresher-content></ion-refresher-content>
         </ion-refresher>
@@ -24,7 +27,9 @@ import {
     IonLoading,
     IonRefresher,
     IonRefresherContent,
-    IonInfiniteScroll
+    IonInfiniteScroll,
+    IonToolbar,
+    IonSearchbar
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import { ref } from 'vue';
@@ -36,20 +41,39 @@ export default {
         BaseLayout,
         IonRefresher,
         IonRefresherContent,
-        IonInfiniteScroll
+        IonInfiniteScroll,
+        IonToolbar,
+        IonSearchbar
     },
     setup() {
         const isLoading = ref(false);
+        const search = ref();
         const setIsLoading = (state: boolean) => isLoading.value = state;
+        const setSearch = (value: string) => search.value = value; 
         const infiniteScroll = ref();
         const loadItems = async (event: any, reset: boolean) => {
-            let hasMoreItems = await tainacanStore.fetchItems({ perPage: '12', orderBy: 'modified', reset: reset});
+            let hasMoreItems = await tainacanStore.fetchItems({ perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
             if (event && event.target)
                 event.target.complete();
             if (!hasMoreItems){
                 infiniteScroll.value.$el.disabled = true;
             }
         }
+        const handleSearch = async (event: any) => {
+            let search = event && event.detail && event.detail.value;
+            if(search) {
+                setSearch(search);
+                await loadItems(null, true);
+            } else {
+                setSearch('');
+            }
+        }
+        const handleCancelSearch = async (event: any) => {
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+            loadItems(null, true);
+        }
         const doRefresh = async (event: any) => {
             await loadItems({}, true);
             if (event && event.target){
@@ -64,7 +88,9 @@ export default {
             tainacanStore,
             doRefresh,
             loadItems,
-            infiniteScroll
+            infiniteScroll,
+            handleSearch,
+            handleCancelSearch
         }
     },
     async created(){
diff --git a/src/store/storeTainacan.ts b/src/store/storeTainacan.ts
index 2caa64d..3a2b8f6 100644
--- a/src/store/storeTainacan.ts
+++ b/src/store/storeTainacan.ts
@@ -136,7 +136,7 @@ const useTainacanStore = defineStore("tainacan", {
       }
     },
 
-    async fetchItems(params: { perPage: string, orderBy: string, reset: boolean }) {
+    async fetchItems(params: { perPage: string, orderBy: string, reset?: boolean, search?: string }) {
       try {
         const wpStore = useWpStore();
         
@@ -148,6 +148,9 @@ const useTainacanStore = defineStore("tainacan", {
         if (params && params.orderBy)
           endpoint += '&orderby=' + params.orderBy;
 
+          if (params && params.search && params.search !== '')
+          endpoint += '&search=' + params.search
+          
         if(params.reset){
           this.items = [];
           this.nextItemsPage = 1;

From 8ee39d4db221a7b3c4b12ed49214f1a72c10ac80 Mon Sep 17 00:00:00 2001
From: joycitta-siqueira <joycitta@gmail.com>
Date: Tue, 28 Jun 2022 17:12:43 -0300
Subject: [PATCH 3/5] Search items update

---
 src/pages/CollectionPage.vue |  3 ++-
 src/pages/ItemsPage.vue      |  3 ++-
 src/store/storeTainacan.ts   | 15 ++++-----------
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/pages/CollectionPage.vue b/src/pages/CollectionPage.vue
index 0b7ff29..8e43d91 100644
--- a/src/pages/CollectionPage.vue
+++ b/src/pages/CollectionPage.vue
@@ -71,7 +71,8 @@ export default defineComponent({
         const setIsLoading = (state: boolean) => isLoading.value = state;
         const setSearch = (value: string) => search.value = value;
         const loadItemsByCollection = async (event: any, reset: boolean) => {
-            let hasMoreCollectionsItems = await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
+            await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
+            let hasMoreCollectionsItems = tainacanStore.totalCollectionItems && tainacanStore.totalCollectionItems !== 0;
             if (event && event.target)
                 event.target.complete();
             if (!hasMoreCollectionsItems){
diff --git a/src/pages/ItemsPage.vue b/src/pages/ItemsPage.vue
index 5e91464..5dc044f 100644
--- a/src/pages/ItemsPage.vue
+++ b/src/pages/ItemsPage.vue
@@ -52,7 +52,8 @@ export default {
         const setSearch = (value: string) => search.value = value; 
         const infiniteScroll = ref();
         const loadItems = async (event: any, reset: boolean) => {
-            let hasMoreItems = await tainacanStore.fetchItems({ perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
+            await tainacanStore.fetchItems({ perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
+            let hasMoreItems = tainacanStore.totalItems && tainacanStore.totalItems !== 0;
             if (event && event.target)
                 event.target.complete();
             if (!hasMoreItems){
diff --git a/src/store/storeTainacan.ts b/src/store/storeTainacan.ts
index 3a2b8f6..214d67b 100644
--- a/src/store/storeTainacan.ts
+++ b/src/store/storeTainacan.ts
@@ -101,13 +101,10 @@ const useTainacanStore = defineStore("tainacan", {
         this.collectionItems.push(...response.data.items);
         this.totalCollectionItems = response.headers['x-wp-total'];
 
-        if (!this.totalCollectionItems ||
-          this.totalCollectionItems === "0") {
-          return false;
-        } else {
-          this.nextItemsByCollectionPage++;
-          return true;
+        if (this.totalCollectionItems && this.totalCollectionItems !== "0") {
+            this.nextItemsByCollectionPage++;
         }    
+
       } catch (err) {
         this.collectionItems = [];
         this.totalCollectionItems = 0;
@@ -162,12 +159,8 @@ const useTainacanStore = defineStore("tainacan", {
         this.items.push(...response.data.items);
         this.totalItems = response.headers['x-wp-total'];
 
-        if (!this.totalItems ||
-          this.totalItems === "0") {
-          return false;
-        } else {
+        if (this.totalItems && this.totalItems !== "0") {
           this.nextItemsPage++;
-          return true;
         } 
 
       } catch (err) {

From 5a8015e251ebe3f4729b7d2274e55d73ee2b0f32 Mon Sep 17 00:00:00 2001
From: joycitta-siqueira <joycitta@gmail.com>
Date: Wed, 29 Jun 2022 22:56:50 -0300
Subject: [PATCH 4/5] Textual search update

---
 src/locales/translation-strings.ts |  6 +++--
 src/pages/CollectionPage.vue       | 38 +++++++++++++++++++----------
 src/pages/ItemsPage.vue            | 39 +++++++++++++++++++-----------
 src/theme/core.css                 |  7 ++++++
 4 files changed, 61 insertions(+), 29 deletions(-)

diff --git a/src/locales/translation-strings.ts b/src/locales/translation-strings.ts
index eb8129c..af251d2 100644
--- a/src/locales/translation-strings.ts
+++ b/src/locales/translation-strings.ts
@@ -26,7 +26,8 @@ export const translationStrings = {
         label_option_multiple_attachments: 'Single item with document and attachments from file selection',
         label_option_single_item: 'Single empty item',
         label_cancel: 'Cancel',
-        label_search: 'Search'
+        label_search: 'Search',
+        label_no_results_found: 'No results found'
     },
     pt: {
         collections: "Coleções",
@@ -55,6 +56,7 @@ export const translationStrings = {
         label_option_multiple_attachments: 'Um item com documento e anexos provenientes de ums seleção de aquivos',
         label_option_single_item: 'Um item vazio',
         label_cancel: 'Cancelar',
-        label_search: 'Buscar'
+        label_search: 'Buscar',
+        label_no_results_found: 'Nenhum resultado encontrado'
     }
 }
\ No newline at end of file
diff --git a/src/pages/CollectionPage.vue b/src/pages/CollectionPage.vue
index 8e43d91..a68757a 100644
--- a/src/pages/CollectionPage.vue
+++ b/src/pages/CollectionPage.vue
@@ -6,13 +6,20 @@
             <ion-refresher-content></ion-refresher-content>
         </ion-refresher>
         <ion-toolbar>
-             <ion-searchbar :placeholder="$t('label_search')" @ionChange="handleSearch($event)" @ionCancel="handleCancelSearch($event)"></ion-searchbar>
+             <ion-searchbar debounce="500" :placeholder="$t('label_search')" @ionChange="handleSearch($event)"></ion-searchbar>
         </ion-toolbar>
         <ion-loading
             :is-open="isLoading"
             :message="$t('label_loading')"
         >
         </ion-loading>
+        <ion-spinner v-if="isSearching" name="bubbles"></ion-spinner>
+        <div 
+            v-if="!isSearching && (!tainacanStore.totalCollectionItems || tainacanStore.totalCollectionItems == '0')" 
+            class="results-not-found"
+        >
+            <span> {{$t('label_no_results_found')}} </span>
+        </div>
         <items-list :items="tainacanStore.collectionItems"></items-list>
             <ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItemsByCollection">
                 <ion-infinite-scroll-content>
@@ -43,7 +50,8 @@ import {
     actionSheetController,
     IonInfiniteScroll,
     IonToolbar,
-    IonSearchbar
+    IonSearchbar,
+    IonSpinner,
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import ItemsList from '@/components/lists/ItemsList.vue';
@@ -58,7 +66,8 @@ export default defineComponent({
         IonButton,
         IonInfiniteScroll,
         IonToolbar,
-        IonSearchbar
+        IonSearchbar,
+        IonSpinner,
     },
     props: {
         id: String,
@@ -66,9 +75,11 @@ export default defineComponent({
     },
     setup(props) {
         const isLoading = ref(false);
+        const isSearching = ref(false)
         const search = ref();
         const infiniteScroll = ref();
         const setIsLoading = (state: boolean) => isLoading.value = state;
+        const setIsSearching = (state: boolean) => isSearching.value = state;
         const setSearch = (value: string) => search.value = value;
         const loadItemsByCollection = async (event: any, reset: boolean) => {
             await tainacanStore.fetchItemsByCollection(props.id + '', { perPage: '12', orderBy: 'modified', reset: reset, search: search.value});
@@ -78,21 +89,22 @@ export default defineComponent({
             if (!hasMoreCollectionsItems){
                 infiniteScroll.value.$el.disabled = true;
             }
+        }    
+        const cancelSearch = async () => {
+            await loadItemsByCollection(null, true);
         }
         const handleSearch = async (event: any) => {
             let search = event && event.detail && event.detail.value;
-            if(search) {
-                setSearch(search);
+
+            setSearch(search);
+            setIsSearching(true);
+
+            if(search !== '') {   
                 await loadItemsByCollection(null, true);
             } else {
-                setSearch('');
+                await cancelSearch();
             }
-        }
-        const handleCancelSearch = async (event: any) => {
-            if (event.cancelable) {
-                event.preventDefault();
-            }
-            loadItemsByCollection(null, true);
+            setIsSearching(false);
         }
         const doRefresh = async (event: any) => {
             await loadItemsByCollection({}, true);
@@ -153,6 +165,7 @@ export default defineComponent({
         let tainacanStore = useTainacanStore();
         return {
             isLoading,
+            isSearching,
             tainacanStore,
             setIsLoading,
             loadItemsByCollection,
@@ -164,7 +177,6 @@ export default defineComponent({
             collectionObject,
             infiniteScroll,
             handleSearch,
-            handleCancelSearch
         }
     },
     async created() {
diff --git a/src/pages/ItemsPage.vue b/src/pages/ItemsPage.vue
index 5dc044f..027dacf 100644
--- a/src/pages/ItemsPage.vue
+++ b/src/pages/ItemsPage.vue
@@ -6,12 +6,17 @@
         >
         </ion-loading>
         <ion-toolbar>
-             <ion-searchbar :placeholder="$t('label_search')" @ionChange="handleSearch($event)" @ionCancel="handleCancelSearch($event)"></ion-searchbar>
+             <ion-searchbar debounce="500" :placeholder="$t('label_search')" @ionChange="handleSearch($event)"></ion-searchbar>
         </ion-toolbar>
         <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">
+            <span> {{$t('label_no_results_found')}} </span>
+        </div>
         <items-list :items="tainacanStore.items"></items-list>
+        
         <ion-infinite-scroll ref="infiniteScroll" threshold="5%" @ionInfinite="loadItems">
             <ion-infinite-scroll-content>
             </ion-infinite-scroll-content>
@@ -29,7 +34,8 @@ import {
     IonRefresherContent,
     IonInfiniteScroll,
     IonToolbar,
-    IonSearchbar
+    IonSearchbar,
+    IonSpinner,
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import { ref } from 'vue';
@@ -43,12 +49,15 @@ export default {
         IonRefresherContent,
         IonInfiniteScroll,
         IonToolbar,
-        IonSearchbar
+        IonSearchbar,
+        IonSpinner,        
     },
     setup() {
         const isLoading = ref(false);
+        const isSearching = ref(false)
         const search = ref();
         const setIsLoading = (state: boolean) => isLoading.value = state;
+        const setIsSearching = (state: boolean) => isSearching.value = state;
         const setSearch = (value: string) => search.value = value; 
         const infiniteScroll = ref();
         const loadItems = async (event: any, reset: boolean) => {
@@ -59,21 +68,23 @@ export default {
             if (!hasMoreItems){
                 infiniteScroll.value.$el.disabled = true;
             }
+        }    
+        const cancelSearch = async () => {
+            await loadItems(null, true);
         }
         const handleSearch = async (event: any) => {
             let search = event && event.detail && event.detail.value;
-            if(search) {
-                setSearch(search);
+            
+            setSearch(search);
+            setIsSearching(true);
+
+            if(search !== '') {
                 await loadItems(null, true);
+                setIsSearching(false);
             } else {
-                setSearch('');
+                await cancelSearch();
             }
-        }
-        const handleCancelSearch = async (event: any) => {
-            if (event.cancelable) {
-                event.preventDefault();
-            }
-            loadItems(null, true);
+            setIsSearching(false);
         }
         const doRefresh = async (event: any) => {
             await loadItems({}, true);
@@ -85,13 +96,13 @@ export default {
         let tainacanStore = useTainacanStore();
         return {
             isLoading,
+            isSearching,
             setIsLoading,
             tainacanStore,
             doRefresh,
             loadItems,
             infiniteScroll,
-            handleSearch,
-            handleCancelSearch
+            handleSearch
         }
     },
     async created(){
diff --git a/src/theme/core.css b/src/theme/core.css
index e69de29..f9eb550 100644
--- a/src/theme/core.css
+++ b/src/theme/core.css
@@ -0,0 +1,7 @@
+ion-spinner {
+    display: block;
+    margin: auto;
+}
+.results-not-found {
+    text-align: center;
+}
\ No newline at end of file

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 5/5] 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