Refactored instant loading and some other components

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

@@ -64,14 +64,14 @@ export interface Dialog {
  * Watch options
  */
 interface WatchOptions {
-  message$: Subject<string>            /* Message subject */
+  alert$: Subject<string>              /* Alert subject */
 }
 
 /**
  * Mount options
  */
 interface MountOptions {
-  message$: Subject<string>            /* Message subject */
+  alert$: Subject<string>              /* Alert subject */
 }
 
 /* ----------------------------------------------------------------------------
@@ -87,9 +87,9 @@ interface MountOptions {
  * @returns Dialog observable
  */
 export function watchDialog(
-  _el: HTMLElement, { message$ }: WatchOptions
+  _el: HTMLElement, { alert$ }: WatchOptions
 ): Observable<Dialog> {
-  return message$
+  return alert$
     .pipe(
       switchMap(message => merge(
         of(true),
@@ -111,7 +111,7 @@ export function watchDialog(
  * @returns Dialog component observable
  */
 export function mountDialog(
-  el: HTMLElement, { message$ }: MountOptions
+  el: HTMLElement, options: MountOptions
 ): Observable<Component<Dialog>> {
   const internal$ = new Subject<Dialog>()
   internal$
@@ -127,7 +127,7 @@ export function mountDialog(
       })
 
   /* Create and return component */
-  return watchDialog(el, { message$ })
+  return watchDialog(el, options)
     .pipe(
       tap(internal$),
       finalize(() => internal$.complete()),

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

@@ -97,7 +97,8 @@ export function watchHeader(
       distinctUntilChanged((a, b) => (
         a.sticky === b.sticky &&
         a.height === b.height
-      ))
+      )),
+      shareReplay(1)
     )
 }
 
@@ -134,7 +135,6 @@ export function mountHeader(
   main$.subscribe(main => internal$.next(main))
   return header$
     .pipe(
-      map(state => ({ ref: el, ...state })),
-      shareReplay(1)
+      map(state => ({ ref: el, ...state }))
     )
 }

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

@@ -28,7 +28,6 @@ import {
   distinctUntilChanged,
   distinctUntilKeyChanged,
   map,
-  shareReplay,
   switchMap
 } from "rxjs/operators"
 
@@ -120,7 +119,6 @@ export function watchMain(
         a.offset === b.offset &&
         a.height === b.height &&
         a.active === b.active
-      )),
-      shareReplay(1)
+      ))
     )
 }

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

@@ -24,7 +24,7 @@ import { Observable, merge } from "rxjs"
 import { filter, sample, take } from "rxjs/operators"
 
 import { configuration } from "~/_"
-import { fetchJSON, getElementOrThrow } from "~/browser"
+import { requestJSON, getElementOrThrow } from "~/browser"
 import {
   SearchIndex,
   isSearchQueryMessage,
@@ -59,7 +59,7 @@ export type Search =
  * @returns Promise resolving with search index
  */
 function fetchSearchIndex(url: string) {
-  return __search?.index || fetchJSON<SearchIndex>(url)
+  return __search?.index || requestJSON<SearchIndex>(url)
 }
 
 /* ----------------------------------------------------------------------------

src/assets/javascripts/components/source/facts/github/index.ts

@@ -24,7 +24,7 @@ import { Repo, User } from "github-types"
 import { Observable } from "rxjs"
 import { defaultIfEmpty, map } from "rxjs/operators"
 
-import { fetchJSON } from "~/browser"
+import { requestJSON } from "~/browser"
 import { round } from "~/utilities"
 
 import { SourceFacts } from "../_"
@@ -47,7 +47,7 @@ export function fetchSourceFactsFromGitHub(
   const url = typeof repo !== "undefined"
     ? `https://api.github.com/repos/${user}/${repo}`
     : `https://api.github.com/users/${user}`
-  return fetchJSON<Repo & User>(url)
+  return requestJSON<Repo & User>(url)
     .pipe(
       map(data => {
 

src/assets/javascripts/components/source/facts/gitlab/index.ts

@@ -24,7 +24,7 @@ import { ProjectSchema } from "gitlab"
 import { Observable } from "rxjs"
 import { defaultIfEmpty, map } from "rxjs/operators"
 
-import { fetchJSON } from "~/browser"
+import { requestJSON } from "~/browser"
 import { round } from "~/utilities"
 
 import { SourceFacts } from "../_"
@@ -45,7 +45,7 @@ export function fetchSourceFactsFromGitLab(
   base: string, project: string
 ): Observable<SourceFacts> {
   const url = `https://${base}/api/v4/projects/${encodeURIComponent(project)}`
-  return fetchJSON<ProjectSchema>(url)
+  return requestJSON<ProjectSchema>(url)
     .pipe(
       map(({ star_count, forks_count }) => ([
         `${round(star_count)} Stars`,