From bd2c197d4156cd9c4acf262b98b9b1b57c657e66 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Wed, 27 Jul 2022 14:51:27 +0200
Subject: [PATCH 1/3] Fix flickering App Top Bar in Preview app

---
 packages/web-app-preview/src/App.vue          | 28 ++++++++++---------
 packages/web-pkg/src/components/AppTopBar.vue | 12 ++++++--
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index 7b941ce8703..3620079f84c 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -7,6 +7,21 @@
     @keydown.right="next"
     @keydown.esc="closeApp"
   >
+    <h1 class="oc-invisible-sr" v-text="pageTitle" />
+    <app-top-bar :resource="activeFilteredFile" @close="closeApp">
+      <template #right>
+        <oc-button
+          v-if="!isFileContentError"
+          class="preview-download"
+          size="small"
+          :aria-label="$gettext('Download currently viewed file')"
+          @click="triggerActiveFileDownload"
+        >
+          <oc-icon size="small" name="file-download" />
+        </oc-button>
+      </template>
+    </app-top-bar>
+
     <div v-if="isFolderLoading || isFileContentLoading" class="oc-position-center">
       <oc-spinner :aria-label="$gettext('Loading media file')" size="xlarge" />
     </div>
@@ -19,19 +34,6 @@
       :accessible-label="$gettext('Failed to load media file')"
     />
     <template v-else>
-      <h1 class="oc-invisible-sr" v-text="pageTitle" />
-      <app-top-bar :resource="activeFilteredFile" @close="closeApp">
-        <template #right>
-          <oc-button
-            class="preview-download"
-            size="small"
-            :aria-label="$gettext('Download currently viewed file')"
-            @click="triggerActiveFileDownload"
-          >
-            <oc-icon size="small" name="file-download" />
-          </oc-button>
-        </template>
-      </app-top-bar>
       <div
         v-show="activeMediaFileCached"
         class="
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index 7d747158332..979dd338719 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="oc-flex oc-p-s app-top-bar">
-    <oc-resource id="app-top-bar-resource" :is-thumbnail-displayed="false" :resource="resource" />
+    <oc-resource
+      v-if="resource"
+      id="app-top-bar-resource"
+      :is-thumbnail-displayed="false"
+      :resource="resource"
+    />
+    <div v-else />
+
     <div>
       <slot name="right"></slot>
       <oc-button
@@ -22,8 +29,7 @@ export default defineComponent({
   name: 'AppTopBar',
   props: {
     resource: {
-      type: Object,
-      required: true
+      type: Object
     }
   }
 })

From 00662692f120bbbbea009ed0a90d5c77c4c8208b Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Wed, 27 Jul 2022 14:54:06 +0200
Subject: [PATCH 2/3] preview: Show error when file could not be loaded

(instead of infinite loading spinner)
---
 packages/web-app-preview/src/App.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index 3620079f84c..6dc2b85eeb9 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -261,9 +261,12 @@ export default defineComponent({
       for (let i = 0; i < this.filteredFiles.length; i++) {
         if (this.filteredFiles[i].webDavPath === filePath) {
           this.activeIndex = i
-          break
+          return
         }
       }
+
+      this.isFileContentLoading = false
+      this.isFileContentError = true
     },
 
     // react to PopStateEvent ()

From 98306f4591aff5530f3d06c64df2204c9f4e0d1c Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Wed, 27 Jul 2022 15:03:54 +0200
Subject: [PATCH 3/3] Add changelog

---
 .../unreleased/bugfix-preview-app-filename-hovers-over-image | 1 +
 changelog/unreleased/bugfix-preview-infinite-loading-spinner | 5 +++++
 2 files changed, 6 insertions(+)
 create mode 100644 changelog/unreleased/bugfix-preview-infinite-loading-spinner

diff --git a/changelog/unreleased/bugfix-preview-app-filename-hovers-over-image b/changelog/unreleased/bugfix-preview-app-filename-hovers-over-image
index 5c52913619c..3fe730ede64 100644
--- a/changelog/unreleased/bugfix-preview-app-filename-hovers-over-image
+++ b/changelog/unreleased/bugfix-preview-app-filename-hovers-over-image
@@ -6,4 +6,5 @@ Therefore we have introduced a new top bar, where the filename will be shown
 and the download and the close button will be displayed.
 
 https://github.com/owncloud/web/pull/7216
+https://github.com/owncloud/web/pull/7359
 https://github.com/owncloud/web/issues/6300
diff --git a/changelog/unreleased/bugfix-preview-infinite-loading-spinner b/changelog/unreleased/bugfix-preview-infinite-loading-spinner
new file mode 100644
index 00000000000..d0ce2c19bc5
--- /dev/null
+++ b/changelog/unreleased/bugfix-preview-infinite-loading-spinner
@@ -0,0 +1,5 @@
+Bugfix: Fix infinite loading spinner on invalid preview links
+
+The `preview` app now shows an error, when a file does not exist (for example when opening a bookmark to a file that does not exist anymore). Before it showed a loading spinner infinitely.
+
+https://github.com/owncloud/web/pull/7359