feat: add next top loader

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]);
+}