Improved rendering performance by omitting unnecessary emits for hero and tabs

material/assets/manifest.json

@@ -1,6 +1,6 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.f34104ec.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.f34104ec.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.ed8df680.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.ed8df680.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.c1fcc1cc.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.c1fcc1cc.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.3bc815f0.min.js",

material/base.html

@@ -179,7 +179,7 @@
     </div>
     {% block scripts %}
       <script src="{{ 'assets/javascripts/vendor.c1fcc1cc.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.f34104ec.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.ed8df680.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/javascripts/components/hero/_/index.ts

@@ -21,7 +21,11 @@
  */
 
 import { Observable, OperatorFunction, pipe } from "rxjs"
-import { distinctUntilChanged, map, switchMap } from "rxjs/operators"
+import {
+  distinctUntilKeyChanged,
+  map,
+  switchMap
+} from "rxjs/operators"
 
 import { Viewport, watchViewportAt } from "browser"
 
@@ -69,7 +73,7 @@ export function mountHero(
     switchMap(el => watchViewportAt(el, { header$, viewport$ })
       .pipe(
         map(({ offset: { y } }) => ({ hidden: y >= 20 })),
-        distinctUntilChanged(),
+        distinctUntilKeyChanged("hidden"),
         applyHero(el)
       )
     )

src/assets/javascripts/components/tabs/_/index.ts

@@ -21,7 +21,11 @@
  */
 
 import { Observable, OperatorFunction, of, pipe } from "rxjs"
-import { distinctUntilChanged, map, switchMap } from "rxjs/operators"
+import {
+  distinctUntilKeyChanged,
+  map,
+  switchMap
+} from "rxjs/operators"
 
 import { Viewport, watchViewportAt } from "browser"
 
@@ -76,7 +80,7 @@ export function mountTabs(
             return watchViewportAt(el, { header$, viewport$ })
               .pipe(
                 map(({ offset: { y } }) => ({ hidden: y >= 10 })),
-                distinctUntilChanged(),
+                distinctUntilKeyChanged("hidden"),
                 applyTabs(el)
               )