From 1a48d408ab81d2b8de7df91623d29406f4b86039 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 21 Nov 2021 13:40:52 +0100
Subject: [PATCH] Adding comments for Photos page's filters handling issue

---
 src/routes/__layout.svelte | 10 +++++++---
 src/routes/photos.svelte   | 10 ++++++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 94f3bb7..6ec0633 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -23,7 +23,7 @@
     /**
      * On page change
      */
-     navigating.subscribe((store: any) => {
+    navigating.subscribe((store: any) => {
         if (store) {
             $pageLoading = true
 
@@ -35,8 +35,12 @@
             // Scroll back to top between page transitions
             setTimeout(() => {
                 // scrollToTop()
-                window.scrollTo(0,0)
-            }, DURATION.PAGE_OUT)
+                // Disable scroll when changing filters on /photos?
+                if (!$page.query.get('country')) {
+                    window.scrollTo(0,0)
+                }
+
+            }, DURATION.PAGE_OUT * 1.5)
         }
     })
 
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index 272d100..22dd470 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -89,7 +89,12 @@
         urlFiltersParams.set('country', filterCountry)
         urlFiltersParams.set('sort', filterSort)
 
-        let path: string = `${$page.path}?${urlFiltersParams.toString()}`
+        let path = `${$page.path}?${urlFiltersParams.toString()}`
+        console.log(path)
+
+        // TODO: Load new params properly?
+        // 1. How to properly navigate to new page / 2. Avoid scrolling to top (from global __layout)
+        // Feels like it calls the url multiple times
         goto(path, { replaceState: true, keepfocus: true, noscroll: true })
     }
 
@@ -245,7 +250,7 @@
             })
         }, {
             threshold: 0.3,
-            rootMargin: '0px 0px 0px'
+            rootMargin: '0px 0px 10%'
         })
 
         // Photos MutationObserver
@@ -269,6 +274,7 @@
 
         // Destroy
         return () => {
+            // Disconnect observers
             observerPhotos && observerPhotos.disconnect()
             mutationPhotos && mutationPhotos.disconnect()
         }