Replace NProgress by topbar (#229)

assets/css/app.css

@@ -2,8 +2,6 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "nprogress/nprogress.css";
-
 @import "./global.css";
 @import "./components.css";
 @import "./utilities.css";

assets/js/app.js

@@ -9,7 +9,7 @@ import "@fontsource/jetbrains-mono";
 
 import "phoenix_html";
 import { Socket } from "phoenix";
-import NProgress from "nprogress";
+import topbar from "topbar";
 import { LiveSocket } from "phoenix_live_view";
 import ContentEditable from "./content_editable";
 import Cell from "./cell";
@@ -39,8 +39,9 @@ const liveSocket = new LiveSocket("/live", Socket, {
 });
 
 // Show progress bar on live navigation and form submits
-window.addEventListener("phx:page-loading-start", (info) => NProgress.start());
+topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
-window.addEventListener("phx:page-loading-stop", (info) => NProgress.done());
+window.addEventListener("phx:page-loading-start", () => topbar.show());
+window.addEventListener("phx:page-loading-stop", () => topbar.hide());
 
 // connect if there are any LiveViews on the page
 liveSocket.connect();

assets/package-lock.json

@@ -14,12 +14,12 @@
         "marked": "^2.0.0",
         "monaco-editor": "^0.23.0",
         "morphdom": "^2.6.1",
-        "nprogress": "^0.2.0",
         "phoenix": "file:../deps/phoenix",
         "phoenix_html": "file:../deps/phoenix_html",
         "phoenix_live_view": "file:../deps/phoenix_live_view",
         "remixicon": "^2.5.0",
-        "scroll-into-view-if-needed": "^2.2.28"
+        "scroll-into-view-if-needed": "^2.2.28",
+        "topbar": "^1.0.1"
       },
       "devDependencies": {
         "@babel/core": "^7.0.0",
@@ -10185,11 +10185,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/nprogress": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
-      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
-    },
     "node_modules/nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
@@ -14545,6 +14540,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/topbar": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/topbar/-/topbar-1.0.1.tgz",
+      "integrity": "sha512-HZqQSMBiG29vcjOrqKCM9iGY/h69G5gQH7ae83ZCPz5uPmbQKwK0sMEqzVDBiu64tWHJ+kk9NApECrF+FAAvRA=="
+    },
     "node_modules/tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -24231,11 +24231,6 @@
         "path-key": "^2.0.0"
       }
     },
-    "nprogress": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
-      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
-    },
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
@@ -27796,6 +27791,11 @@
         "repeat-string": "^1.6.1"
       }
     },
+    "topbar": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/topbar/-/topbar-1.0.1.tgz",
+      "integrity": "sha512-HZqQSMBiG29vcjOrqKCM9iGY/h69G5gQH7ae83ZCPz5uPmbQKwK0sMEqzVDBiu64tWHJ+kk9NApECrF+FAAvRA=="
+    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",

assets/package.json

@@ -19,12 +19,12 @@
     "marked": "^2.0.0",
     "monaco-editor": "^0.23.0",
     "morphdom": "^2.6.1",
-    "nprogress": "^0.2.0",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
     "remixicon": "^2.5.0",
-    "scroll-into-view-if-needed": "^2.2.28"
+    "scroll-into-view-if-needed": "^2.2.28",
+    "topbar": "^1.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",