Fixed header shadow appearing after document switch

material/assets/manifest.json

@@ -1,6 +1,6 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.d3f83a35.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.d3f83a35.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.71def461.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.71def461.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
   "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.3f90c815.min.css",

material/base.html

@@ -190,7 +190,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.d3f83a35.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.71def461.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

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

@@ -85,7 +85,7 @@ let components$: Observable<ComponentMap>
  * ------------------------------------------------------------------------- */
 
 /**
- * Setup bindings to elements with given names
+ * Setup bindings to components with given names
  *
  * This function will maintain bindings to the elements identified by the given
  * names in-between document switches and update the elements in-place.

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

@@ -45,7 +45,7 @@ interface MountOptions {
  *
  * @param options - Options
  *
- * @return Header observable
+ * @return Operator function
  */
 export function mountHeader(
   { viewport$ }: MountOptions

src/assets/javascripts/components/header/title/index.ts

@@ -54,7 +54,7 @@ interface MountOptions {
  *
  * @param options - Options
  *
- * @return Header title observable
+ * @return Operator function
  */
 export function mountHeaderTitle(
   { header$, viewport$ }: MountOptions

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

@@ -62,7 +62,7 @@ interface MountOptions {
  *
  * @param options - Options
  *
- * @return Hero observable
+ * @return Operator function
  */
 export function mountHero(
   { header$, viewport$ }: MountOptions

src/assets/javascripts/components/main/index.ts

@@ -20,8 +20,8 @@
  * IN THE SOFTWARE.
  */
 
-import { Observable, OperatorFunction, pipe } from "rxjs"
-import { distinctUntilKeyChanged, switchMap } from "rxjs/operators"
+import { Observable, OperatorFunction, Subject, pipe } from "rxjs"
+import { distinctUntilKeyChanged, switchMap, tap } from "rxjs/operators"
 
 import {
   Header,
@@ -52,31 +52,35 @@ interface MountOptions {
 /**
  * Mount main area from source observable
  *
+ * The header must be connected to the main area observable outside of the
+ * operator function, as the header will persist in-between document switches
+ * while the main area is replaced. However, the header observable must be
+ * passed to this function, so we connect both via a long-living subject.
+ *
  * @param options - Options
  *
- * @return Main area observable
+ * @return Operator function
  */
 export function mountMain(
   { header$, viewport$ }: MountOptions
 ): OperatorFunction<HTMLElement, Main> {
-  return pipe(
-    switchMap(el => useComponent("header")
-      .pipe(
-        switchMap(header => {
-          const main$ = watchMain(el, { header$, viewport$ })
+  const main$ = new Subject<Main>()
 
-          /* Paint header shadow */
-          main$
-            .pipe(
-              distinctUntilKeyChanged("active"),
-              paintHeaderShadow(header)
-            )
-              .subscribe()
-
-          /* Return main area */
-          return main$
-        })
+  /* Connect to main area observable via long-living subject */
+  useComponent("header")
+    .pipe(
+      switchMap(header => main$
+        .pipe(
+          distinctUntilKeyChanged("active"),
+          paintHeaderShadow(header)
+        )
       )
     )
+      .subscribe()
+
+  /* Return operator */
+  return pipe(
+    switchMap(el => watchMain(el, { header$, viewport$ })),
+    tap(main => main$.next(main))
   )
 }

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

@@ -60,7 +60,7 @@ interface MountOptions {
  *
  * @param options - Options
  *
- * @return Search observable
+ * @return Operator function
  */
 export function mountSearch(
   { query$, reset$, result$ }: MountOptions
@@ -69,6 +69,7 @@ export function mountSearch(
     switchMap(() => combineLatest([query$, result$, reset$])
       .pipe(
         map(([query, result]) => ({ query, result }))
-      ))
+      )
+    )
   )
 }

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

@@ -63,7 +63,7 @@ interface MountOptions {
  *
  * @param options - Options
  *
- * @return Tabs observable
+ * @return Operator function
  */
 export function mountTabs(
   { header$, viewport$, screen$ }: MountOptions

src/assets/javascripts/index.ts

@@ -114,22 +114,17 @@ export function initialize(config: unknown) {
   if (!isConfig(config))
     throw new SyntaxError(`Invalid configuration: ${JSON.stringify(config)}`)
 
+  /* Setup user interface observables */
   const location$ = watchLocation()
-  const document$ = watchDocument(
-    config.feature.instant ? { location$ } : {}
-  )
-  const hash$ = watchLocationHash()
+  const hash$     = watchLocationHash()
   const viewport$ = watchViewport()
-  const tablet$ = watchMedia("(min-width: 960px)")
-  const screen$ = watchMedia("(min-width: 1220px)")
+  const tablet$   = watchMedia("(min-width: 960px)")
+  const screen$   = watchMedia("(min-width: 1220px)")
 
-  /* ----------------------------------------------------------------------- */
-
-  const worker = setupSearchWorker(config.worker.search, {
-    base: config.base
-  })
-
-  /* ----------------------------------------------------------------------- */
+  /* Setup document observable */
+  const document$ = config.feature.instant
+    ? watchDocument({ location$ })
+    : watchDocument()
 
   /* Setup toggle bindings */
   setupToggles([
@@ -137,7 +132,7 @@ export function initialize(config: unknown) {
     "search"                           /* Toggle for search */
   ], { document$ })
 
-  /* Setup components bindings */
+  /* Setup component bindings */
   setupComponents([
     "container",                       /* Container */
     "header",                          /* Header */
@@ -155,6 +150,12 @@ export function initialize(config: unknown) {
 
   /* ----------------------------------------------------------------------- */
 
+  const worker = setupSearchWorker(config.worker.search, {
+    base: config.base
+  })
+
+  /* ----------------------------------------------------------------------- */
+
   /* Create header observable */
   const header$ = useComponent("header")
     .pipe(