feat: add next top loader

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();