DON-1092 – refine post-search scroll behaviour

src/app/campaign-details/campaign-details.component.ts

@@ -33,6 +33,11 @@ export class CampaignDetailsComponent implements OnInit, OnDestroy {
 
   private timer: any; // State update setTimeout reference, for client side when donations open soon
 
+  ngOnInit() {
+    this.campaign = this.route.snapshot.data.campaign;
+    this.setSecondaryProps(this.campaign);
+  }
+
   constructor(
     private datePipe: DatePipe,
     private location: Location,
@@ -52,11 +57,6 @@ export class CampaignDetailsComponent implements OnInit, OnDestroy {
     });
   }
 
-  ngOnInit() {
-    this.campaign = this.route.snapshot.data.campaign;
-    this.setSecondaryProps(this.campaign);
-  }
-
   ngOnDestroy() {
     if (isPlatformBrowser(this.platformId) && this.timer) {
       window.clearTimeout(this.timer);

src/app/explore/explore.component.ts

@@ -79,9 +79,10 @@ export class ExploreComponent implements OnDestroy, OnInit {
       if (isPlatformBrowser(this.platformId)) {
         const positionMarker = document.getElementById('SCROLL_POSITION_WHEN_PARAMS_CHANGE');
 
-        // Angular scrolls automatically, using setTimeout to delay this scroll to a later task so this gets to
-        // set the position the page is left in.
-        setTimeout(() => positionMarker?.scrollIntoView({}), 0);
+        // Angular routing changes scroll position (possibly while trying to restore a previous known position). Using setTimeout to
+        // then scroll to the new best position for this use case (the search form and top of results) after that work has happened,
+        // whenever the search filters change substantively.
+        setTimeout(() => positionMarker?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 200);
       }
     });
   }
@@ -192,8 +193,14 @@ export class ExploreComponent implements OnDestroy, OnInit {
    * Update the browser's query params when a sort or filter is applied.
    */
   private setQueryParams() {
-    this.router.navigate(['explore'], {
-      queryParams: this.searchService.getQueryParams(this.defaultSort),
-    });
+    const nextQueryParams = this.searchService.getQueryParams(this.defaultSort);
+    if (JSON.stringify(this.route.snapshot.queryParams) === JSON.stringify(nextQueryParams)) {
+      // Don't navigate at all if no change in query params. This saves us from inconsistencies
+      // later such as scroll adjustment kicking in only when the router params actually changed,
+      // and saves giving the browser needless work to do.
+      return;
+    }
+
+    this.router.navigate(['explore'], { queryParams: nextQueryParams });
   }
 }

src/app/meta-campaign/meta-campaign.component.html

@@ -10,7 +10,7 @@
       [mainMessage]="tickerMainMessage"
       >
       <div slot="ticker-items">
-        @for (tickerItem of tickerItems; track tickerItem) {
+        @for (tickerItem of tickerItems; track tickerItem.label) {
           <biggive-totalizer-ticker-item
             [figure]="tickerItem.figure"
             [label]="tickerItem.label">

src/app/meta-campaign/meta-campaign.component.ts

@@ -186,9 +186,10 @@ export class MetaCampaignComponent implements AfterViewChecked, OnDestroy, OnIni
       if (isPlatformBrowser(this.platformId)) {
         const positionMarker = document.getElementById('SCROLL_POSITION_WHEN_PARAMS_CHANGE');
 
-        // Angular scrolls automatically, using setTimeout to delay this scroll to a later task so this gets to
-        // set the position the page is left in.
-        setTimeout(() => positionMarker?.scrollIntoView({}), 0);
+        // Angular routing changes scroll position (possibly while trying to restore a previous known position). Using setTimeout to
+        // then scroll to the new best position for this use case (the search form and top of results) after that work has happened,
+        // whenever the search filters change substantively.
+        setTimeout(() => positionMarker?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 200);
       }
     });
   }
@@ -381,9 +382,15 @@ export class MetaCampaignComponent implements AfterViewChecked, OnDestroy, OnIni
    * Update the browser's query params when a sort or filter is applied.
    */
   private setQueryParams() {
-    this.router.navigate([], {
-      queryParams: this.searchService.getQueryParams(this.getDefaultSort()),
-    });
+    const nextQueryParams = this.searchService.getQueryParams(this.getDefaultSort());
+    if (JSON.stringify(this.route.snapshot.queryParams) === JSON.stringify(nextQueryParams)) {
+      // Don't navigate at all if no change in query params. This saves us from inconsistencies
+      // later such as scroll adjustment kicking in only when the router params actually changed,
+      // and saves giving the browser needless work to do.
+      return;
+    }
+
+    this.router.navigate([], { queryParams: nextQueryParams });
   }
 
   private listenForRouteChanges() {