Loading

src/pages/ColletionsList.vue

@@ -1,5 +1,11 @@
 <template>
     <base-layout page-title="Collections List">
+    <ion-loading
+    :is-open="isOpenRef"
+    cssClass="my-custom-class"
+    message="Carregando..."
+    >
+    </ion-loading>
         <ion-list>
             <ion-item v-for="collection of collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
                 <ion-thumbnail slot="start"> <!-- verificar se existe a imagem de fato -->
@@ -11,15 +17,17 @@
     </base-layout>
 </template>
 
-<script>
+<script lang="ts">
 import {
     IonList,
     IonItem,
     IonImg,
     IonThumbnail,
+    IonLoading,
     IonLabel,
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
+import { ref } from 'vue';
 export default {
     components: {
         IonList,
@@ -27,8 +35,14 @@ export default {
         IonImg,
         IonThumbnail,
         IonLabel,
+        IonLoading,
         BaseLayout
     },
+    setup() {
+        const isOpenRef = ref(false);
+        const setOpen = (state: boolean) => isOpenRef.value = state;
+        return { isOpenRef, setOpen }
+    },
     data() {
         return {
             collections: [],
@@ -36,10 +50,12 @@ export default {
     },
 
     created(){
-    fetch("https://museucasadahera.acervos.museus.gov.br/wp-json/tainacan/v2/collections?perpage=4&orderby=modified")
+        this.setOpen(true)
+        fetch("https://museucasadahera.acervos.museus.gov.br/wp-json/tainacan/v2/collections?perpage=4&orderby=modified")
         .then((response) => response.json())
         .then((data) => {
-        this.collections = data;
+            this.collections = data;
+            this.setOpen(false)
         });
     },
 

src/pages/ItemsList.vue

@@ -1,23 +1,37 @@
 <template>
     <base-layout page-title="Items List" page-default-back-link="/collections">
+    <ion-loading
+    :is-open="isOpenRef"
+    cssClass="my-custom-class"
+    message="Carregando..."
+    >
+    </ion-loading>
     <ion-item v-for="item of items" :key="item.id">
         <ion-label> {{ item.title }} </ion-label>
     </ion-item>
     </base-layout>
 </template>
 
-<script>
+<script lang="ts">
 import {
     IonItem,
     IonLabel,
+    IonLoading,
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
+import { ref } from 'vue';
 export default {
     components: {
         IonItem,
         IonLabel,
+        IonLoading,
         BaseLayout
     },
+    setup() {
+        const isOpenRef = ref(false);
+        const setOpen = (state: boolean) => isOpenRef.value = state;
+        return { isOpenRef, setOpen }
+    },
     data() {
         return {
             items: [],
@@ -26,10 +40,12 @@ export default {
     },
 
     created(){
+        this.setOpen(true)
         fetch(`https://museucasadahera.acervos.museus.gov.br/wp-json/tainacan/v2/collection/${this.collectionId}/items`)
             .then((response) => response.json())
             .then((data) => {
                 this.items = data.items;
+                this.setOpen(false)
             });
     },
 }