feat: add next top loader

package-lock.json

@@ -28,6 +28,8 @@
         "eslint-config-next": "13.4.19",
         "next": "13.4.19",
         "next-themes": "^0.2.1",
+        "nextjs-toploader": "^1.4.2",
+        "nprogress": "^0.2.0",
         "postcss": "8.4.29",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -1448,6 +1450,11 @@
         "form-data": "^3.0.0"
       }
     },
+    "node_modules/@types/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -5175,6 +5182,21 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/nextjs-toploader": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/nextjs-toploader/-/nextjs-toploader-1.4.2.tgz",
+      "integrity": "sha512-FS5+zCdNHLq0YA+SijkbDifOMFNayKfxkCLTiM6TIrvSaf6kAzCGlNjwgVpoG3zpampVMQSVf5L/jrWFJgs23g==",
+      "dependencies": {
+        "@types/nprogress": "^0.2.0",
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "next": ">= 6.0.0",
+        "react": ">= 16.0.0",
+        "react-dom": ">= 16.0.0"
+      }
+    },
     "node_modules/no-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
@@ -5210,6 +5232,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

package.json

@@ -24,10 +24,13 @@
     "autoprefixer": "10.4.15",
     "codemirror": "^6.0.1",
     "convex": "^1.2.1",
+    "encoding": "^0.1.13",
     "eslint": "8.49.0",
     "eslint-config-next": "13.4.19",
     "next": "13.4.19",
     "next-themes": "^0.2.1",
+    "nextjs-toploader": "^1.4.2",
+    "nprogress": "^0.2.0",
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -37,7 +40,6 @@
     "remark-gfm": "^3.0.1",
     "svix": "^1.11.0",
     "tailwindcss": "3.3.3",
-    "typescript": "5.2.2",
-    "encoding": "^0.1.13"
+    "typescript": "5.2.2"
   }
-}
+}

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { ConvexProvider, NextThemesProvider } from '@/providers';
 import { ClerkProvider } from '@clerk/nextjs';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import NextTopLoader from 'nextjs-toploader';
 import './globals.css';
 
 const inter = Inter({ subsets: ['latin'] });
@@ -30,6 +31,10 @@ export default function RootLayout({
         >
           <ConvexProvider>
             <NextThemesProvider>
+              <NextTopLoader
+                color='#3743e5'
+                showSpinner={false}
+              />
               <Navbar />
               <div className='p-4 w-full h-full flex flex-col'>{children}</div>
             </NextThemesProvider>

src/components/Editor.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCodeMirror } from '@/hooks';
+import { useCodeMirror, useRouter } from '@/hooks';
 import { basicDark } from '@/lib/codemirror';
 import { useUser } from '@clerk/nextjs';
 import { indentWithTab } from '@codemirror/commands';
@@ -10,7 +10,6 @@ import { Compartment, EditorState, Text } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { basicSetup } from 'codemirror';
 import { useMutation } from 'convex/react';
-import { useRouter } from 'next/navigation';
 import { FormEvent, useState } from 'react';
 import { api } from '../../convex/_generated/api';
 import { Doc } from '../../convex/_generated/dataModel';

src/components/MarkdownContent.css

@@ -80,7 +80,7 @@
   --color-fg-muted: #57606a;
   --color-fg-subtle: #6e7781;
   --color-canvas-default: #ffffff;
-  --color-canvas-subtle: #f6f8fa;
+  --color-canvas-subtle: #ffffff;
   --color-border-default: #d0d7de;
   --color-border-muted: hsla(210, 18%, 87%, 1);
   --color-neutral-muted: rgba(175, 184, 193, 0.2);
@@ -827,7 +827,7 @@
 
 .markdown-content .highlight pre,
 .markdown-content pre {
-  padding: 0 16px;
+  padding: 0;
   overflow: auto;
   font-size: 85%;
   line-height: 1.45;

src/components/ThemeButton.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-import { useMountedEffect } from '@/hooks';
+import { useMountedEffect, useProgressEffect } from '@/hooks';
 import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
 import { BsMoonStarsFill, BsSunFill } from 'react-icons/bs';
-import { ImSpinner2 } from 'react-icons/im';
 
 export default function ThemeButton() {
+  useProgressEffect();
   const { mounted, Loader } = useMountedEffect();
   const { theme, setTheme } = useTheme();
 

src/hooks/index.ts

@@ -1,6 +1,12 @@
 import SpinningLoader from '@/components/SpinningLoader';
 import { EditorState, Extension, Text } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
+import {
+  useRouter as useNextRouter,
+  usePathname,
+  useSearchParams,
+} from 'next/navigation';
+import NProgress from 'nprogress';
 import { useEffect, useRef, useState } from 'react';
 
 export function useCodeMirror({
@@ -43,3 +49,29 @@ export function useMountedEffect() {
 
   return { mounted, Loader: SpinningLoader };
 }
+
+export function useRouter() {
+  const router = useNextRouter();
+  const { push, back } = router;
+
+  router.push = (href, options) => {
+    NProgress.start();
+    push(href, options);
+  };
+
+  router.back = () => {
+    NProgress.start();
+    back();
+  };
+
+  return router;
+}
+
+export function useProgressEffect() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    NProgress.done();
+  }, [pathname, searchParams]);
+}