feat(frontend): add loading bar indicator (#1170)

Author: ankarhem

package.json

@@ -20,6 +20,7 @@
     "@headlessui/react": "^0.3.1",
     "@supercharge/request-ip": "^1.1.2",
     "@svgr/webpack": "^5.5.0",
+    "@tanem/react-nprogress": "^3.0.57",
     "ace-builds": "^1.4.12",
     "axios": "^0.21.1",
     "bcrypt": "^5.0.1",

src/components/LoadingBar/index.tsx

@@ -0,0 +1,73 @@
+import { NProgress } from '@tanem/react-nprogress';
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { useRouter } from 'next/router';
+
+interface BarProps {
+  progress: number;
+  isFinished: boolean;
+}
+
+const Bar = ({ progress, isFinished }: BarProps) => {
+  return (
+    <div
+      className={`fixed top-0 left-0 z-50 w-full transition-opacity ease-out duration-400 ${
+        isFinished ? 'opacity-0' : 'opacity-100'
+      }`}
+    >
+      <div
+        className="duration-300 bg-indigo-400 transition-width"
+        style={{
+          height: '3px',
+          width: `${progress * 100}%`,
+        }}
+      />
+    </div>
+  );
+};
+
+const NProgressBar = ({ loading }: { loading: boolean }) => (
+  <NProgress isAnimating={loading}>
+    {({ isFinished, progress }) => (
+      <Bar progress={progress} isFinished={isFinished} />
+    )}
+  </NProgress>
+);
+
+const MemoizedNProgress = React.memo(NProgressBar);
+
+const LoadingBar = (): React.ReactPortal | null => {
+  const [mounted, setMounted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    const handleLoading = () => {
+      setLoading(true);
+    };
+    const handleFinishedLoading = () => {
+      setLoading(false);
+    };
+    router.events.on('routeChangeStart', handleLoading);
+    router.events.on('routeChangeComplete', handleFinishedLoading);
+    router.events.on('routeChangeError', handleFinishedLoading);
+
+    return () => {
+      router.events.off('routeChangeStart', handleLoading);
+      router.events.off('routeChangeComplete', handleFinishedLoading);
+      router.events.off('routeChangeError', handleFinishedLoading);
+    };
+  }, [router]);
+
+  return mounted
+    ? ReactDOM.createPortal(
+        <MemoizedNProgress loading={loading} />,
+        document.body
+      )
+    : null;
+};
+
+export default LoadingBar;

src/pages/_app.tsx

@@ -16,6 +16,7 @@ import { InteractionProvider } from '../context/InteractionContext';
 import StatusChecker from '../components/StatusChacker';
 import { PublicSettingsResponse } from '../../server/interfaces/api/settingsInterfaces';
 import { SettingsProvider } from '../context/SettingsContext';
+import LoadingBar from '../components/LoadingBar';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const loadLocaleData = (locale: AvailableLocales): Promise<any> => {
@@ -113,6 +114,7 @@ const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
           defaultLocale="en"
           messages={loadedMessages}
         >
+          <LoadingBar />
           <SettingsProvider currentSettings={currentSettings}>
             <InteractionProvider>
               <ToastProvider components={{ Toast }}>

tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
     extend: {
       transitionProperty: {
         'max-height': 'max-height',
+        width: 'width',
       },
       fontFamily: {
         sans: ['Inter var', ...defaultTheme.fontFamily.sans],