diff --git a/src/components/Metadata.vue b/src/components/Metadata.vue
index 4889317c..e297639c 100644
--- a/src/components/Metadata.vue
+++ b/src/components/Metadata.vue
@@ -1,8 +1,5 @@
 <template>
-  <div class="loading-icon fill-block" v-if="loading">
-    <XLoadingIcon />
-  </div>
-  <div class="outer" v-else-if="fileid">
+  <div class="outer" v-if="fileid">
     <div v-if="title || description" class="exif-head" @click="editEXIF()">
       <div class="title" v-if="title">{{ title }}</div>
       <div class="description" v-if="description">{{ description }}</div>
@@ -60,6 +57,9 @@
       <iframe class="fill-block" :src="mapUrl" />
     </div>
   </div>
+  <div class="loading-icon fill-block" v-else-if="loading">
+    <XLoadingIcon />
+  </div>
   <div v-else>
     {{ t('memries', 'Failed to load metadata') }}
   </div>
@@ -389,6 +389,17 @@ export default defineComponent({
       this.fileid = null;
       this.exif = {};
 
+      // get photo from id if this is the current viewer photo
+      if (_m.viewer.currentPhoto?.fileid === photo) {
+        photo = _m.viewer.currentPhoto;
+      }
+
+      // try to get as much information as we can from
+      // the image info already loaded
+      if (typeof photo === 'object' && photo.imageInfo) {
+        this.setImageInfo(photo.imageInfo);
+      }
+
       // which clusters to get
       const clusters = this.routeIsPublic
         ? String()
@@ -407,16 +418,15 @@ export default defineComponent({
       const url = API.Q(utils.getImageInfoUrl(photo), { tags, clusters });
       const res = await this.guardState(axios.get<IImageInfo>(url));
       if (!res) return null;
-
-      // unwrap basic info
-      this.fileid = res.data.fileid;
-      this.filename = res.data.basename;
-      this.exif = res.data.exif || {};
-      this.baseInfo = res.data;
+      this.setImageInfo(res.data);
 
       return this.baseInfo;
     },
 
+    async refresh() {
+      if (this.fileid) await this.update(this.fileid);
+    },
+
     editDate() {
       _m.modals.editMetadata([_m.viewer.currentPhoto!], [1]);
     },
@@ -433,8 +443,17 @@ export default defineComponent({
       _m.modals.editMetadata([_m.viewer.currentPhoto!], [4]);
     },
 
-    async refresh() {
-      if (this.fileid) await this.update(this.fileid);
+    setImageInfo(info: IImageInfo) {
+      this.fileid = info.fileid;
+      this.filename = info.basename;
+      this.exif = info.exif ?? {};
+      this.baseInfo = info;
+    },
+
+    handleFileUpdated({ fileid }: utils.BusEvent['files:file:updated']) {
+      if (fileid && this.fileid === fileid) {
+        this.refresh();
+      }
     },
 
     async guardState<T>(promise: Promise<T>): Promise<T | null> {
@@ -450,12 +469,6 @@ export default defineComponent({
         if (state === this.state) this.loading--;
       }
     },
-
-    handleFileUpdated({ fileid }: utils.BusEvent['files:file:updated']) {
-      if (fileid && this.fileid === fileid) {
-        this.refresh();
-      }
-    },
   },
 });
 </script>