feat(src/app): loading progress bar

mafewtm · Jul 27, 2024 · 3521e50 · 3521e50
1 parent 39ed601
commit 3521e50
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -2,6 +2,21 @@ import { Box, Stack, Title } from '@mantine/core';
 import classes from './index.module.css';
 import Media from './components/media/Media';
 import Carousel from './components/carousel/Carousel';
+import { nprogress, NavigationProgress } from '@mantine/nprogress';
+
+const handlers = {
+  loadProgress(data : { loadFraction: number }) {
+    if (data.loadFraction === 1) {
+      nprogress.complete()
+    } else {
+      nprogress.set(data.loadFraction * 100);
+    }
+  }
+};
+
+window.addEventListener('message', function(event) {
+  handlers[event.data.eventName as keyof typeof handlers]?.(event.data);
+});
 
 export default function App() {
   return (
@@ -11,6 +26,7 @@ export default function App() {
       </Stack>
       <Carousel />
       <Media />
+      <NavigationProgress />
     </Box>
   );
-}
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
@@ -5,6 +5,7 @@ import App from './App';
 import './global.css';
 import '@mantine/core/styles.css';
 import '@mantine/carousel/styles.css';
+import '@mantine/nprogress/styles.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>