metadata: add spinner loader

src/App.vue

@@ -9,7 +9,7 @@
     }"
   >
     <NcAppNavigation v-if="showNavigation" ref="nav">
-      <template id="app-memories-navigation" #list>
+      <template #list>
         <NcAppNavigationItem
           v-for="item in navItems"
           :key="item.name"
@@ -190,20 +190,17 @@ export default defineComponent({
           name: this.t("memories", "EXIF"),
           icon: "icon-details",
 
-          async mount(el, fileInfo, context) {
-            if (this.metadataComponent) {
-              this.metadataComponent.$destroy();
-            }
+          mount(el, fileInfo, context) {
+            this.metadataComponent?.$destroy?.();
             this.metadataComponent = new Vue(Metadata as any);
-            // Only mount after we have all the info we need
-            await this.metadataComponent.update(fileInfo);
             this.metadataComponent.$mount(el);
+            this.metadataComponent.update(fileInfo);
           },
           update(fileInfo) {
             this.metadataComponent.update(fileInfo);
           },
           destroy() {
-            this.metadataComponent.$destroy();
+            this.metadataComponent?.$destroy?.();
             this.metadataComponent = null;
           },
         })

src/components/Metadata.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="outer">
+  <div class="outer" v-if="fileInfo">
     <div class="top-field" v-for="field of topFields" :key="field.title">
       <div class="icon">
         <component :is="field.icon" :size="24" />
@@ -42,6 +42,10 @@
       <iframe class="fill-block" :src="mapUrl" />
     </div>
   </div>
+
+  <div class="loading-icon fill-block" v-else>
+    <NcLoadingIcon />
+  </div>
 </template>
 
 <script lang="ts">
@@ -49,6 +53,7 @@ import { defineComponent } from "vue";
 
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
+import NcLoadingIcon from "@nextcloud/vue/dist/Components/NcLoadingIcon";
 
 import axios from "@nextcloud/axios";
 import { subscribe, unsubscribe } from "@nextcloud/event-bus";
@@ -80,6 +85,7 @@ export default defineComponent({
   components: {
     NcActions,
     NcActionButton,
+    NcLoadingIcon,
     EditIcon,
   },
 
@@ -221,7 +227,7 @@ export default defineComponent({
 
     /** Image info */
     imageInfo(): string | null {
-      return this.fileInfo.basename || (<any>this.fileInfo).name;
+      return this.fileInfo?.basename || (<any>this.fileInfo)?.name;
     },
 
     imageInfoSub(): string[] | null {
@@ -275,7 +281,7 @@ export default defineComponent({
   methods: {
     async update(fileInfo: IFileInfo) {
       this.state = Math.random();
-      this.fileInfo = fileInfo;
+      this.fileInfo = null;
       this.exif = {};
 
       const state = this.state;
@@ -283,8 +289,9 @@ export default defineComponent({
       const res = await axios.get<any>(url);
       if (state !== this.state) return;
 
-      this.baseInfo = res.data;
+      this.fileInfo = fileInfo;
       this.exif = res.data.exif || {};
+      this.baseInfo = res.data;
     },
 
     handleFileUpdated({ fileid }) {
@@ -329,6 +336,14 @@ export default defineComponent({
   }
 }
 
+.loading-icon {
+  height: 75%;
+  :deep svg {
+    width: 60px;
+    height: 60px;
+  }
+}
+
 .map {
   width: 100%;
   aspect-ratio: 16 / 10;