CodeSandBox/monaco-editor-lsp-next
2
0
Fork 0
mirror of https://github.com/cfngc4594/monaco-editor-lsp-next.git synced 2025-05-18 15:26:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): replace loading skeleton with custom Loading component

Browse Source
This commit is contained in:
cfngc4594 2025-03-13 11:44:14 +08:00
parent 2f037f8a78
commit 60aef705d5
1 changed files with 4 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/code-editor.tsx
View File

@ -1,9 +1,9 @@
"use client"; "use client";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { Skeleton } from "./ui/skeleton";
import { highlighter } from "@/lib/shiki"; import { highlighter } from "@/lib/shiki";
import type { editor } from "monaco-editor"; import type { editor } from "monaco-editor";
import { Loading } from "@/components/loading";
import { EditorLanguage } from "@prisma/client"; import { EditorLanguage } from "@prisma/client";
import { shikiToMonaco } from "@shikijs/monaco"; import { shikiToMonaco } from "@shikijs/monaco";
import type { Monaco } from "@monaco-editor/react"; import type { Monaco } from "@monaco-editor/react";
@ -14,13 +14,6 @@ import { connectToLanguageServer } from "@/lib/language-server";
import { useCodeEditorStore } from "@/store/useCodeEditorStore"; import { useCodeEditorStore } from "@/store/useCodeEditorStore";
import type { MonacoLanguageClient } from "monaco-languageclient"; import type { MonacoLanguageClient } from "monaco-languageclient";
// Skeleton component for loading state
const CodeEditorLoadingSkeleton = () => (
<div className="h-full w-full p-2">
<Skeleton className="h-full w-full rounded-3xl" />
</div>
);
// Dynamically import Monaco Editor with SSR disabled // Dynamically import Monaco Editor with SSR disabled
const Editor = dynamic( const Editor = dynamic(
async () => { async () => {
@ -32,7 +25,7 @@ const Editor = dynamic(
}, },
{ {
ssr: false, ssr: false,
loading: () => <CodeEditorLoadingSkeleton />, loading: () => <Loading />,
} }
); );
@ -132,7 +125,7 @@ export default function CodeEditor({
}, []); }, []);
if (!hydrated) { if (!hydrated) {
return <CodeEditorLoadingSkeleton />; return <Loading />;
} }
const handleEditorWillMount = (monaco: Monaco) => { const handleEditorWillMount = (monaco: Monaco) => {
@ -149,7 +142,7 @@ export default function CodeEditor({
onMount={handleEditorDidMount} onMount={handleEditorDidMount}
onChange={handleEditorChange} onChange={handleEditorChange}
options={editorConfig} options={editorConfig}
loading={<CodeEditorLoadingSkeleton />} loading={<Loading />}
className="h-full w-full py-2" className="h-full w-full py-2"
/> />
); );