From baf720c201ede463d84d103a579bb3846bf0c49a Mon Sep 17 00:00:00 2001
From: Andrew Branch <andrew@wheream.io>
Date: Sat, 8 Apr 2023 20:07:17 -0700
Subject: [PATCH] Add progress indicator

---
 package-lock.json         | 26 ++++++++++++++++++++++++++
 packages/web/package.json |  2 ++
 packages/web/src/main.css |  9 +++++++++
 packages/web/src/main.ts  | 12 ++++++++++++
 4 files changed, 49 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 10b9396..1cc0e0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -386,6 +386,12 @@
       "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
       "dev": true
     },
+    "node_modules/@types/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==",
+      "dev": true
+    },
     "node_modules/@types/ts-expose-internals": {
       "name": "ts-expose-internals",
       "version": "4.9.4",
@@ -552,6 +558,11 @@
         }
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -1177,9 +1188,11 @@
       "dependencies": {
         "@arethetypeswrong/core": "file:../core",
         "immer": "^9.0.21",
+        "nprogress": "^0.2.0",
         "validate-npm-package-name": "^5.0.0"
       },
       "devDependencies": {
+        "@types/nprogress": "^0.2.0",
         "@types/validate-npm-package-name": "^4.0.0",
         "esbuild": "^0.17.4",
         "vite": "^4.0.4"
@@ -1206,9 +1219,11 @@
       "version": "file:packages/web",
       "requires": {
         "@arethetypeswrong/core": "file:../core",
+        "@types/nprogress": "^0.2.0",
         "@types/validate-npm-package-name": "^4.0.0",
         "esbuild": "^0.17.4",
         "immer": "^9.0.21",
+        "nprogress": "^0.2.0",
         "validate-npm-package-name": "^5.0.0",
         "vite": "^4.0.4"
       }
@@ -1373,6 +1388,12 @@
       "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
       "dev": true
     },
+    "@types/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==",
+      "dev": true
+    },
     "@types/ts-expose-internals": {
       "version": "npm:ts-expose-internals@4.9.4",
       "resolved": "https://registry.npmjs.org/ts-expose-internals/-/ts-expose-internals-4.9.4.tgz",
@@ -1494,6 +1515,11 @@
         "whatwg-url": "^5.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
diff --git a/packages/web/package.json b/packages/web/package.json
index 6dfd049..e976492 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -17,9 +17,11 @@
   "dependencies": {
     "@arethetypeswrong/core": "file:../core",
     "immer": "^9.0.21",
+    "nprogress": "^0.2.0",
     "validate-npm-package-name": "^5.0.0"
   },
   "devDependencies": {
+    "@types/nprogress": "^0.2.0",
     "@types/validate-npm-package-name": "^4.0.0",
     "esbuild": "^0.17.4",
     "vite": "^4.0.4"
diff --git a/packages/web/src/main.css b/packages/web/src/main.css
index 1af7fdb..7df6bf5 100644
--- a/packages/web/src/main.css
+++ b/packages/web/src/main.css
@@ -1,3 +1,5 @@
+@import url("nprogress/nprogress.css");
+
 :root {
   --color-bg: #fff;
   --color-text-primary: rgba(0, 0, 0, 1);
@@ -130,3 +132,10 @@ td {
 .display-none {
   display: none;
 }
+
+#nprogress .peg {
+  box-shadow: none;
+}
+#nprogress .bar {
+  background: var(--color-link);
+}
diff --git a/packages/web/src/main.ts b/packages/web/src/main.ts
index c8e3170..5b83f8b 100644
--- a/packages/web/src/main.ts
+++ b/packages/web/src/main.ts
@@ -3,6 +3,7 @@ import type { ResultMessage } from "../worker/worker.ts";
 import { subscribeRenderer } from "./renderer.ts";
 import { updateState, type PackageInfo, type ParsedPackageSpec, getState, subscribe, type State } from "./state.ts";
 import { shallowEqual } from "./utils/shallowEqual.ts";
+import NProgress from "nprogress";
 
 // Good grief https://semver.org/#is-there-a-suggested-regular-expression-regex-to-check-a-semver-string
 const semverRegex =
@@ -28,6 +29,8 @@ worker.onmessage = async (event: MessageEvent<ResultMessage>) => {
   }
 };
 
+NProgress.configure({ showSpinner: false });
+
 subscribeRenderer({
   onPackageNameInput,
   onCheck,
@@ -40,6 +43,15 @@ subscribeRenderer({
 
 subscribe(debounce(getPackageInfo, 300));
 
+subscribe((prevState) => {
+  const state = getState();
+  if (state.isLoading && !prevState.isLoading) {
+    NProgress.start();
+  } else if (!state.isLoading && prevState.isLoading) {
+    NProgress.done();
+  }
+});
+
 if (location.search) {
   const packageNameInput = document.getElementById("package-spec") as HTMLInputElement;
   const params = new URLSearchParams(location.search);