Merge pull request #57 from a0v0:a0v0/issue28

feat: add progress bar to indicate page load progress

app/providers.tsx

@@ -4,6 +4,7 @@ import {NextUIProvider} from "@nextui-org/react";
 import {ThemeProvider as NextThemesProvider} from "next-themes";
 import {ThemeProviderProps} from "next-themes/dist/types";
 import {useRouter} from "next/navigation";
+import NextTopLoader from "nextjs-toploader";
 import * as React from "react";
 
 export interface ProvidersProps {
@@ -16,7 +17,10 @@ export function Providers({children, themeProps}: ProvidersProps) {
 
   return (
     <NextUIProvider navigate={router.push}>
-      <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
+      <NextThemesProvider {...themeProps}>
+        <NextTopLoader color="#18c964" height={2} />
+        {children}
+      </NextThemesProvider>
     </NextUIProvider>
   );
 }

package.json

@@ -74,6 +74,7 @@
     "next": "14.1.4",
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.2.1",
+    "nextjs-toploader": "^1.6.12",
     "nprogress": "^0.2.0",
     "parse-numeric-range": "1.2.0",
     "pdf-lib": "^1.17.1",

styles/globals.css

@@ -3,7 +3,6 @@
 @tailwind utilities;
 
 @import 'prism.css';
-@import 'nprogress.css';
 @import 'ads.css';
 
 html {
@@ -18,35 +17,6 @@ body {
   min-height: 100vh;
   position: relative;
 }
-/* Experimental */
-/* body::after { 
-  background-image: radial-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 40%),
-  radial-gradient(rgb(255, 209, 82) 30%, rgb(226, 105, 150), rgba(226, 105, 150, 0.4) 41%, transparent 52%),
-  radial-gradient(rgb(160, 51, 255) 37%, transparent 46%),
-  linear-gradient(155deg, transparent 65%, rgb(37, 212, 102) 95%),
-  linear-gradient(45deg, rgb(0, 101, 224), rgb(15, 139, 255));
-background-position: left bottom, 109% 68%, 109% 68%, center center, center center;
-background-repeat: no-repeat;
-background-size: 200% 200%, 285% 500%, 285% 500%, cover, cover;
-content: "";
-display: block;
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
-opacity: 0.17;
-position: fixed;
-z-index: 0;
-} */
-
-/* 
-@media screen and (max-width: 640px) {
-  #app-container {
-    height: 100vh;
-    overflow-x: hidden;
-  }
-}
- */
 
 @layer base {
   :root {