From 189442e9c4f2894b21cad7aa5a3474f0cec05c04 Mon Sep 17 00:00:00 2001
From: Dag Stuan <dag.stuan@bekk.no>
Date: Sun, 15 Jun 2025 17:04:33 +0200
Subject: [PATCH] fix(web): small issues with the memory viewer. (#19184)

* Match fade transition timing between photo-viewer and memory-viewer.

* Fix blank page after refreshing memory page.

If the user refreshed in the browser while on the memory page, the page
would show a blank page. This was caused by skipping initialization in
afterNavigate. Fix by always initializing the memory page in
afterNavigate.
---
 .../components/asset-viewer/photo-viewer.svelte    |  5 +++--
 .../components/memory-page/memory-viewer.svelte    | 14 ++++----------
 web/src/lib/constants.ts                           |  2 ++
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index 9cb80fb2dd..db7901dfbe 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -3,9 +3,10 @@
   import { zoomImageAction } from '$lib/actions/zoom-image';
   import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import { assetViewerFadeDuration } from '$lib/constants';
   import { castManager } from '$lib/managers/cast-manager.svelte';
-  import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
@@ -240,7 +241,7 @@
       use:swipe={() => ({})}
       onswipe={onSwipe}
       class="h-full w-full"
-      transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
+      transition:fade={{ duration: haveFadeTransition ? assetViewerFadeDuration : 0 }}
     >
       {#if $slideshowState !== SlideshowState.None && $slideshowLook === SlideshowLook.BlurredBackground}
         <img
diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index b36082b500..77ccebe42b 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -23,12 +23,11 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { AppRoute, QueryParameter } from '$lib/constants';
+  import { AppRoute, assetViewerFadeDuration, QueryParameter } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+  import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { Viewport } from '$lib/managers/timeline-manager/types';
   import { type MemoryAsset, memoryStore } from '$lib/stores/memory.store.svelte';
   import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
@@ -261,12 +260,7 @@
     playerInitialized = true;
   };
 
-  afterNavigate(({ from, to, type }) => {
-    if (type === 'enter') {
-      // afterNavigate triggers twice on first page load (once when mounted with 'enter' and then a second time
-      // with the actual 'goto' to URL).
-      return;
-    }
+  afterNavigate(({ from, to }) => {
     memoryStore.initialize().then(
       () => {
         let target = null;
@@ -469,7 +463,7 @@
         >
           <div class="relative h-full w-full rounded-2xl bg-black">
             {#key current.asset.id}
-              <div transition:fade class="h-full w-full">
+              <div transition:fade={{ duration: assetViewerFadeDuration }} class="h-full w-full">
                 {#if current.asset.isVideo}
                   <video
                     bind:this={videoPlayer}
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts
index c27727d4b3..1a40f8522e 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -420,3 +420,5 @@ export enum ToggleVisibility {
   HIDE_UNNANEMD = 'hide-unnamed',
   SHOW_ALL = 'show-all',
 }
+
+export const assetViewerFadeDuration: number = 150;