fix(web): timeline renders nothing with an invalid asset scroll target (#16994)

* fix(web): fix asset grid showing nothing with an invalid asset target

* Deduplicate

* Scroll to position where appropriate

* a bit cleaner

* fix: lint

---------

Co-authored-by: Min Idzelis <min123@gmail.com>
Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/components/photos-page/asset-grid.svelte

@@ -82,26 +82,33 @@
   let bottomSectionHeight = 60;
   let leadout = $state(false);
 
-  const completeNav = async () => {
+  const scrollTo = (top: number) => {
-    if ($gridScrollTarget?.at) {
+    element?.scrollTo({ top });
-      try {
-        const bucket = await assetStore.findBucketForAsset($gridScrollTarget.at);
-        if (bucket) {
-          const height = bucket.findAssetAbsolutePosition($gridScrollTarget.at);
-          if (height) {
-            element?.scrollTo({ top: height });
     showSkeleton = false;
+  };
+
+  const scrollToTop = () => {
+    scrollTo(0);
+  };
+
+  const completeNav = async () => {
+    const scrollTarget = $gridScrollTarget?.at;
+    if (scrollTarget) {
+      try {
+        const bucket = await assetStore.findBucketForAsset(scrollTarget);
+        if (bucket) {
+          const height = bucket.findAssetAbsolutePosition(scrollTarget);
+          if (height) {
+            scrollTo(height);
             assetStore.updateIntersections();
+            return;
           }
         }
       } catch {
-        element?.scrollTo({ top: 0 });
+        // ignore errors - asset may not be in the store
-        showSkeleton = false;
       }
-    } else {
-      element?.scrollTo({ top: 0 });
-      showSkeleton = false;
     }
+    scrollToTop();
   };
   beforeNavigate(() => (assetStore.suspendTransitions = true));
   afterNavigate((nav) => {
@@ -134,8 +141,7 @@
                 { replaceState: true, forceNavigate: true },
               );
             } else {
-              element?.scrollTo({ top: 0 });
+              scrollToTop();
-              showSkeleton = false;
             }
           }, 500);
         }