feat: showing progress while page is being loaded (#485)

apps/app/package.json

@@ -25,6 +25,7 @@
     "lodash.debounce": "^4.0.8",
     "next": "12.3.2",
     "next-pwa": "^5.6.0",
+    "nprogress": "^0.2.0",
     "react": "18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-color": "^2.19.3",
@@ -40,6 +41,7 @@
   "devDependencies": {
     "@types/js-cookie": "^3.0.2",
     "@types/node": "18.0.6",
+    "@types/nprogress": "^0.2.0",
     "@types/react": "18.0.15",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-color": "^3.0.6",

apps/app/pages/_app.tsx

@@ -1,6 +1,14 @@
 // styles
 import "styles/globals.css";
 import "styles/editor.css";
+import "styles/nprogress.css";
+
+// router
+import Router from "next/router";
+
+// nprogress
+import NProgress from "nprogress";
+
 // contexts
 import { UserProvider } from "contexts/user.context";
 import { ToastContextProvider } from "contexts/toast.context";
@@ -8,6 +16,12 @@ import { ThemeContextProvider } from "contexts/theme.context";
 // types
 import type { AppProps } from "next/app";
 
+// nprogress
+NProgress.configure({ showSpinner: false });
+Router.events.on("routeChangeStart", NProgress.start);
+Router.events.on("routeChangeError", NProgress.done);
+Router.events.on("routeChangeComplete", NProgress.done);
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <UserProvider>

apps/app/styles/nprogress.css

@@ -0,0 +1,39 @@
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #3f76ff;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 0.2rem;
+}
+
+/* for blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #3f76ff, 0 0 5px #3f76ff;
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}