Merge pull request #1275 from Demonthos/update-scroll-history-lazy

Update scroll history lazily when you leave a page

packages/router/src/history/web.rs

@@ -59,8 +59,6 @@ pub struct WebHistory<R: Routable> {
     do_scroll_restoration: bool,
     history: History,
     listener_navigation: Option<EventListener>,
-    #[allow(dead_code)]
-    listener_scroll: Option<EventListener>,
     listener_animation_frame: Arc<Mutex<Option<AnimationFrame>>>,
     prefix: Option<String>,
     window: Window,
@@ -98,27 +96,7 @@ impl<R: Routable> WebHistory<R> {
     where
         <R as std::str::FromStr>::Err: std::fmt::Display,
     {
-        let w = window().expect("access to `window`");
-        let h = w.history().expect("`window` has access to `history`");
-        let document = w.document().expect("`window` has access to `document`");
-
-        let myself = Self::new_inner(
-            prefix,
-            do_scroll_restoration,
-            EventListener::new(&document, "scroll", {
-                let mut last_updated = 0.0;
-                move |evt| {
-                    // the time stamp in milliseconds
-                    let time_stamp = evt.time_stamp();
-                    // throttle the scroll event to 100ms
-                    if (time_stamp - last_updated) < 100.0 {
-                        return;
-                    }
-                    update_scroll::<R>(&w, &h);
-                    last_updated = time_stamp;
-                }
-            }),
-        );
+        let myself = Self::new_inner(prefix, do_scroll_restoration);
 
         let current_route = myself.current_route();
         let current_url = current_route.to_string();
@@ -169,32 +147,23 @@ impl<R: Routable> WebHistory<R> {
         myself
     }
 
-    fn new_inner(
-        prefix: Option<String>,
-        do_scroll_restoration: bool,
-        event_listener: EventListener,
-    ) -> Self
+    fn new_inner(prefix: Option<String>, do_scroll_restoration: bool) -> Self
     where
         <R as std::str::FromStr>::Err: std::fmt::Display,
     {
         let window = window().expect("access to `window`");
         let history = window.history().expect("`window` has access to `history`");
 
-        let listener_scroll = match do_scroll_restoration {
-            true => {
-                history
-                    .set_scroll_restoration(ScrollRestoration::Manual)
-                    .expect("`history` can set scroll restoration");
-                Some(event_listener)
-            }
-            false => None,
-        };
+        if do_scroll_restoration {
+            history
+                .set_scroll_restoration(ScrollRestoration::Manual)
+                .expect("`history` can set scroll restoration");
+        }
 
         Self {
             do_scroll_restoration,
             history,
             listener_navigation: None,
-            listener_scroll,
             listener_animation_frame: Default::default(),
             prefix,
             window,
@@ -302,6 +271,13 @@ where
             // don't push the same state twice
             return;
         }
+
+        let w = window().expect("access to `window`");
+        let h = w.history().expect("`window` has access to `history`");
+
+        // update the scroll position before pushing the new state
+        update_scroll::<R>(&w, &h);
+
         let path = self.full_path(&state);
 
         let state = self.create_state(state);
@@ -372,6 +348,13 @@ where
             // don't push the same state twice
             return;
         }
+
+        let w = window().expect("access to `window`");
+        let h = w.history().expect("`window` has access to `history`");
+
+        // update the scroll position before pushing the new state
+        update_scroll::<R>(&w, &h);
+
         let path = self.full_path(&state);
 
         let state: [f64; 2] = self.create_state(state);