added loading component for editor loading

Author: programmer-rahul

app/components/code-capture/code-image-preview.tsx

@@ -3,18 +3,24 @@
 import useStore from "@/lib/store/store";
 import WindowContent from "./preview/window-content";
 import WindowHeader from "./preview/window-header";
+import { cn } from "@/lib/utils";
+import CodeImageLoadingSkelton from "./preview/code-image-loading-skelton";
 
 export default function CodeImagePreview() {
   const windowWidth = useStore((state) => state.windowWidth);
+  const isEditorMounted = useStore((state) => state.isEditorMounted);
 
   return (
     <div className="preview items-center py-3 px-4 flex flex-col w-full rounded-md bg-[#191919]">
       <div className="preview-box w-full mt-40">
         {/* frame  */}
         <div
-          className="frame mx-auto max-w-full bg-gradient-to-tr to-purple-600 from-blue-400 rounded-md px-4 py-4"
+          className={cn(
+            "frame mx-auto max-w-full bg-gradient-to-tr to-purple-600 from-blue-400 rounded-md px-8 py-8",
+            !isEditorMounted && "hidden"
+          )}
           style={{
-            width: windowWidth + 32,
+            width: windowWidth + 8 * 4 * 2,
           }}
         >
           <div
@@ -28,6 +34,8 @@ export default function CodeImagePreview() {
             <WindowContent />
           </div>
         </div>
+
+        {!isEditorMounted && <CodeImageLoadingSkelton />}
       </div>
     </div>
   );

app/components/code-capture/preview/code-image-loading-skelton.tsx

@@ -0,0 +1,17 @@
+export default function CodeImageLoadingSkelton() {
+  return (
+    <div
+      className="frame mx-auto max-w-full rounded-md px-4 py-4"
+      style={{
+        width: 400 + 32,
+      }}
+    >
+      <div
+        className="window flex flex-col border rounded-md border-[#82738E] min-h-40"
+        style={{
+          width: 400,
+        }}
+      ></div>
+    </div>
+  );
+}

lib/monoco-editor.tsx

@@ -14,6 +14,7 @@ export default function MonacoEditor() {
   const changeWindowWidth = useStore((state) => state.changeWindowWidth);
 
   const editorTheme = useStore((state) => state.editorTheme);
+  const changeEditorMounted = useStore((state) => state.changeEditorMounted);
 
   const editorLanguage = useStore((state) => state.editorLanguage);
 
@@ -40,6 +41,7 @@ export default function MonacoEditor() {
     }`}
       theme="vs-dark"
       onMount={(editor) => {
+        changeEditorMounted(true);
         editorRef.current = editor;
         updateEditorWindowTheme(editorTheme);
       }}

lib/store/slices/code-image-slice.ts

@@ -0,0 +1,6 @@
+import CodeImageSlice from "@/lib/types/store/slices/code-image-slice";
+import { SetState } from "@/lib/types/store/store";
+
+export default function createCodeImageSlice(set: SetState): CodeImageSlice {
+  return {};
+}

lib/store/slices/editor-slice.ts

@@ -1,7 +1,7 @@
 import EditorSlice from "@/lib/types/store/slices/editor-slice";
 import { SetState } from "@/lib/types/store/store";
 
-export default function createEditorSlice(set : SetState): EditorSlice {
+export default function createEditorSlice(set: SetState): EditorSlice {
   return {
     editorTheme: "Night Owl",
     changeEditorTheme: (theme) =>
@@ -22,5 +22,8 @@ export default function createEditorSlice(set : SetState): EditorSlice {
       set(() => ({
         editorThemeColors: themeColors,
       })),
+
+    isEditorMounted: false,
+    changeEditorMounted: (value) => set(() => ({ isEditorMounted: value })),
   };
 }

lib/types/store/slices/code-image-slice.tsx

@@ -0,0 +1 @@
+export default interface CodeImageSlice {}

lib/types/store/slices/editor-slice.tsx

@@ -11,4 +11,7 @@ export default interface EditorSlice {
 
   editorThemeColors: EditorThemeColors;
   changeEditorThemeColors: (themeColors: EditorThemeColors) => void;
+
+  isEditorMounted : boolean,
+  changeEditorMounted : (value : boolean) => void,
 }