From 28c0bda708250911776499c3fbb145ab8b94c531 Mon Sep 17 00:00:00 2001
From: trickypr <23250792+trickypr@users.noreply.github.com>
Date: Fri, 10 Nov 2023 20:25:37 +1100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Tab=20loading=20spinner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 15 +++++-
 .../browser/components/tabs/Tab.svelte        | 18 ++++++--
 src/content/browser/components/tabs/tab.ts    | 46 +++++++++++++++++--
 src/content/browser/lib/binaryEnums.ts        |  4 ++
 src/content/shared/components/Spinner.svelte  | 28 +++++++++++
 6 files changed, 104 insertions(+), 8 deletions(-)
 create mode 100644 src/content/browser/lib/binaryEnums.ts
 create mode 100644 src/content/shared/components/Spinner.svelte

diff --git a/package.json b/package.json
index 30c514b..382b141 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
   },
   "dependencies": {
     "@catppuccin/palette": "^0.2.0",
+    "fnts": "^2.0.1",
     "mitt": "^3.0.1",
     "remixicon": "^3.5.0",
     "snarkdown": "^2.0.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f6cfeed..e236617 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,6 +13,9 @@ dependencies:
   '@catppuccin/palette':
     specifier: ^0.2.0
     version: 0.2.0
+  fnts:
+    specifier: ^2.0.1
+    version: 2.0.1(typescript@5.2.2)
   mitt:
     specifier: ^3.0.1
     version: 3.0.1
@@ -1422,6 +1425,17 @@ packages:
       path-exists: 4.0.0
     dev: true
 
+  /fnts@2.0.1(typescript@5.2.2):
+    resolution: {integrity: sha512-pg5jBjtTdWMen8OzFKd0gPOHgnvAzm0ndKKrGT4xYZYBSobDLhqLSf2tnDpmdPuPvV3rMwae0lOmmvOJ+l1VNg==}
+    peerDependencies:
+      typescript: '>=4.7'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      typescript: 5.2.2
+    dev: false
+
   /follow-redirects@1.15.3:
     resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==}
     engines: {node: '>=4.0'}
@@ -3213,7 +3227,6 @@ packages:
     resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
     engines: {node: '>=14.17'}
     hasBin: true
-    dev: true
 
   /undici-types@5.25.3:
     resolution: {integrity: sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==}
diff --git a/src/content/browser/components/tabs/Tab.svelte b/src/content/browser/components/tabs/Tab.svelte
index 5eda03e..c8cb28f 100644
--- a/src/content/browser/components/tabs/Tab.svelte
+++ b/src/content/browser/components/tabs/Tab.svelte
@@ -6,13 +6,14 @@
   import { type Tab } from './tab'
   import { closeTab, moveTabBefore, moveTabAfter } from '../../lib/globalApi'
   import type { DragEventHandler } from 'svelte/elements'
+  import Spinner from '../../../shared/components/Spinner.svelte'
 
   export let tab: Tab
   export let selectedTab: number
 
   let lastDragIsBefore: undefined | boolean
 
-  const { title, icon, uri } = tab
+  const { title, icon, uri, loading } = tab
 
   $: tab.getId() == selectedTab && (document.title = $title)
 
@@ -53,8 +54,12 @@
   aria-selected={tab.getId() == selectedTab}
   draggable="true"
 >
-  {#if $icon}
-    <img class="tab__icon" src={$icon} alt="favicon" />
+  {#if $loading}
+    <div class="tab__start-item">
+      <Spinner />
+    </div>
+  {:else if $icon}
+    <img class="tab__icon tab__start-item" src={$icon} alt="favicon" />
   {/if}
   <span>{$title || $uri.asciiSpec}</span>
   <button
@@ -121,9 +126,14 @@
     background: var(--surface-2);
   }
 
+  .tab__start-item {
+    margin-right: 0.5rem;
+    /* The spinner uses em to size, we can resize it with font size */
+    font-size: 1rem;
+  }
+
   .tab__icon {
     height: 1.5rem;
     width: 1.5rem;
-    margin-right: 0.5rem;
   }
 </style>
diff --git a/src/content/browser/components/tabs/tab.ts b/src/content/browser/components/tabs/tab.ts
index b419bac..b0df00b 100644
--- a/src/content/browser/components/tabs/tab.ts
+++ b/src/content/browser/components/tabs/tab.ts
@@ -45,6 +45,9 @@ export class Tab {
   public canGoBack = writable(false)
   public canGoForward = writable(false)
 
+  public loading = writable(false)
+  public loadingProgress = writable(0)
+
   /**
    * This is used by the omnibox to determine if text input should be focused.
    */
@@ -99,10 +102,15 @@ export class Tab {
     this.progressListener.events.on('locationChange', (event) => {
       if (!event.aWebProgress.isTopLevel) return
 
+      this.icon.set(null)
+
       this.uri.set(event.aLocation)
       this.canGoBack.set(this.browserElement.canGoBack)
       this.canGoForward.set(this.browserElement.canGoForward)
     })
+
+    this.progressListener.events.on('progressPercent', this.loadingProgress.set)
+    this.progressListener.events.on('loadingChange', this.loading.set)
   }
 
   public async setContainer(container: HTMLElement) {
@@ -173,6 +181,8 @@ type TabProgressListenerEvent = {
     aLocation: nsIURIType
     aFlags: number
   } & TabProgressListenerEventDefaults
+  progressPercent: number
+  loadingChange: boolean
 }
 
 let progressListenerCounter = 0
@@ -199,6 +209,10 @@ class TabProgressListener
     )
   }
 
+  /**
+   * This request is identical to {@link onProgressChange64}. The only
+   * difference is that the c++ impl uses `long long`s instead of `long`s
+   */
   onProgressChange64(
     aWebProgress: nsIWebProgressType,
     aRequest: nsIRequestType,
@@ -207,7 +221,14 @@ class TabProgressListener
     aCurTotalProgress: number,
     aMaxTotalProgress: number,
   ): void {
-    console.log('onProgressChange64')
+    return this.onProgressChange(
+      aWebProgress,
+      aRequest,
+      aCurSelfProgress,
+      aMaxSelfProgress,
+      aCurTotalProgress,
+      aMaxTotalProgress,
+    )
   }
 
   onRefreshAttempted(
@@ -225,8 +246,22 @@ class TabProgressListener
     aStateFlags: number,
     aStatus: number,
   ): void {
-    console.log('onStateChange')
+    if (!aWebProgress.isTopLevel) return
+    if (
+      aStateFlags & Ci.nsIWebProgressListener.STATE_START &&
+      aStateFlags & Ci.nsIWebProgressListener.STATE_IS_NETWORK
+    ) {
+      this.events.emit('loadingChange', true)
+    }
+
+    if (
+      aStateFlags & Ci.nsIWebProgressListener.STATE_STOP &&
+      aStateFlags & Ci.nsIWebProgressListener.STATE_IS_NETWORK
+    ) {
+      this.events.emit('loadingChange', false)
+    }
   }
+
   onProgressChange(
     aWebProgress: nsIWebProgressType,
     aRequest: nsIRequestType,
@@ -235,8 +270,13 @@ class TabProgressListener
     aCurTotalProgress: number,
     aMaxTotalProgress: number,
   ): void {
-    console.log('onProgressChange')
+    if (!aWebProgress || !aWebProgress.isTopLevel) return
+    this.events.emit(
+      'progressPercent',
+      aMaxTotalProgress !== 0 ? aCurTotalProgress / aMaxTotalProgress : 0,
+    )
   }
+
   onLocationChange(
     aWebProgress: nsIWebProgressType,
     aRequest: nsIRequestType,
diff --git a/src/content/browser/lib/binaryEnums.ts b/src/content/browser/lib/binaryEnums.ts
new file mode 100644
index 0000000..d1620f5
--- /dev/null
+++ b/src/content/browser/lib/binaryEnums.ts
@@ -0,0 +1,4 @@
+import { curry } from 'fnts'
+
+export const isBitSet = curry((bit: number, num: number) => (num & bit) !== 0)
+export const isBitSetFast = curry((bit: number, num: number) => num & bit)
diff --git a/src/content/shared/components/Spinner.svelte b/src/content/shared/components/Spinner.svelte
new file mode 100644
index 0000000..6a5d70a
--- /dev/null
+++ b/src/content/shared/components/Spinner.svelte
@@ -0,0 +1,28 @@
+<div class="spinner" />
+
+<style>
+  .spinner {
+    background-color: var(--active);
+
+    display: block;
+    width: 0.75em;
+    height: 0.75em;
+    border-radius: 0.25em;
+
+    margin: 0.125rem;
+
+    animation-name: spinner;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes spinner {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(90deg);
+    }
+  }
+</style>