Add progress indicator

Author: andrewbranch

package-lock.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"

packages/web/package.json

@@ -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);
+}

packages/web/src/main.css

@@ -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);