chore(playground): add dynamic import to improve performace

Author: developerfred

src/components/CodeEditor.tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useEffect, useState } from 'react'
 import { useTheme } from '@/lib/theme/ThemeProvider'
 import { Editor } from '@monaco-editor/react'
-import * as monaco from 'monaco-editor'
+import type * as monaco from 'monaco-editor'
 
 interface CodeEditorProps {
     code: string
@@ -23,35 +23,37 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
     const { isDarkTheme, getColor } = useTheme()
     const [isEditorReady, setIsEditorReady] = useState(false)
+    const [isMounted, setIsMounted] = useState(false)
 
     const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
         editorRef.current = editor
         setIsEditorReady(true)
     }
 
-    
+    useEffect(() => {
+        setIsMounted(true)
+        return () => setIsMounted(false)
+    }, [])
+
     useEffect(() => {
         if (editorRef.current) {
             editorRef.current.updateOptions({ readOnly: disabled })
         }
     }, [disabled])
 
-    
     useEffect(() => {
-        if (editorRef.current && code !== editorRef.current.getValue()) {
+        if (editorRef.current && code !== editorRef.current.getValue() && isEditorReady) {
             editorRef.current.setValue(code)
         }
     }, [code, isEditorReady])
 
-    
     const editorContainerStyle = {
         border: `1px solid ${getColor('border')}`,
         borderRadius: '0.375rem',
         overflow: 'hidden',
         height: height
     }
 
-    
     const LoadingPlaceholder = () => (
         <div
             style={{
@@ -73,6 +75,10 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
         </div>
     )
 
+    if (!isMounted) {
+        return <div style={editorContainerStyle}><LoadingPlaceholder /></div>
+    }
+
     return (
         <div style={editorContainerStyle}>
             <Editor
@@ -94,7 +100,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                     cursorBlinking: 'smooth',
                     automaticLayout: true,
                     lineNumbers: 'on',
-                    renderLineHighlight: 'all',                    
+                    renderLineHighlight: 'all',
                     folding: true,
                     contextmenu: true,
                     formatOnPaste: true,

src/components/NetworkSelector.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import React, { useMemo, useState, useEffect } from 'react'
 import { Network } from '@/lib/types/network'
 import { useTheme } from '@/lib/theme/ThemeProvider'
 import Card from '@/components/ui/Card'
@@ -19,14 +19,27 @@ export default function NetworkSelector({
     onNetworkChange
 }: NetworkSelectorProps) {
     const { isDarkTheme, setCurrentNetworkId, getColor, getNetworkColor } = useTheme();
+    const [mounted, setMounted] = useState(false);
 
-    // Handle network change
+    
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    
     const handleNetworkChange = (networkId: string) => {
         onNetworkChange(networkId);
-        setCurrentNetworkId(networkId); // Update global theme with network
+        setCurrentNetworkId(networkId); 
     };
 
-    const selectedNetwork = networks.find(n => n.id === selectedNetworkId);
+    const selectedNetwork = useMemo(() =>
+        networks.find(n => n.id === selectedNetworkId),
+        [networks, selectedNetworkId]
+    );
+
+    if (!mounted) {
+        return <Card className="space-y-2 h-64"><div className="animate-pulse">Loading networks...</div></Card>;
+    }
 
     return (
         <Card className="space-y-2">
@@ -35,9 +48,9 @@ export default function NetworkSelector({
             <div className="grid grid-cols-2 gap-2">
                 {networks.map((network) => {
                     const isSelected = selectedNetworkId === network.id;
-                    
+
                     const networkColor = getNetworkColor('primary');
-                    
+
                     const buttonStyle = {
                         backgroundColor: isSelected
                             ? `${networkColor}${isDarkTheme ? '20' : '10'}` // Hex opacity
@@ -91,7 +104,6 @@ export default function NetworkSelector({
                 })}
             </div>
 
-
             {selectedNetwork && (
                 <div className="mt-4 text-xs space-y-1">
                     <div className="flex justify-between">

src/components/Playground.tsx

@@ -18,7 +18,7 @@ import NetworkBadge from './ui/NetworkBadge'
 import Card from './ui/Card'
 import Badge from './ui/Badge'
 
-
+// Dynamically import components with client-side only rendering
 const CodeEditor = dynamic(() => import('./CodeEditor'), { ssr: false })
 const Console = dynamic(() => import('./Console'), { ssr: false })
 const NetworkSelector = dynamic(() => import('./NetworkSelector'), { ssr: false })
@@ -85,8 +85,9 @@ export default function Playground() {
     return colorMap[level] || colorMap['beginner']
   }
 
+  // SidebarContent component with display name
   const SidebarContent = useMemo(() => {
-    return () => (
+    const SidebarContentComponent = () => (
       <div className="flex flex-col gap-4">
         <NetworkSelector
           networks={Object.values(NETWORKS)}
@@ -139,6 +140,8 @@ export default function Playground() {
         </Card>
       </div>
     );
+    SidebarContentComponent.displayName = 'SidebarContent';
+    return SidebarContentComponent;
   }, [
     selectedNetwork,
     selectedExampleId,
@@ -147,14 +150,17 @@ export default function Playground() {
     isRunning,
     outputs.length,
     runCode,
-    clearOutput
+    clearOutput,
+    setSelectedNetworkId,
+    setSelectedExampleId
   ]);
 
   const NetworkIndicator = () => (
     <div className="fixed top-0 left-0 right-0 h-1 z-50 opacity-80" style={{
       background: `linear-gradient(90deg, ${getNetworkColor()} 0%, rgba(255,255,255,0) 100%)`
     }} />
-  )
+  );
+  NetworkIndicator.displayName = 'NetworkIndicator';
 
   const SidebarToggle = () => (
     <div className="fixed bottom-6 right-6 lg:hidden z-30">
@@ -182,10 +188,12 @@ export default function Playground() {
         </svg>
       </button>
     </div>
-  )
+  );
+  SidebarToggle.displayName = 'SidebarToggle';
 
+  // MainContent component with display name
   const MainContent = useMemo(() => {
-    return () => (
+    const MainContentComponent = () => (
       <div className="flex flex-col gap-4 h-full">
         <TutorialPanel example={selectedExample} network={selectedNetwork} />
 
@@ -225,6 +233,8 @@ export default function Playground() {
         )}
       </div>
     );
+    MainContentComponent.displayName = 'MainContent';
+    return MainContentComponent;
   }, [
     selectedExample,
     selectedNetwork,

src/lib/hooks/useLocalStorage.ts

@@ -1,49 +1,33 @@
 import { useState, useEffect } from 'react';
 
-/**
- * Hook for using localStorage with type safety
- * 
- * @param key The localStorage key
- * @param initialValue The initial value if nothing is in localStorage
- * @returns A stateful value and a function to update it
- */
 export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
-    // State to store our value
     const [storedValue, setStoredValue] = useState<T>(initialValue);
+    const [isHydrated, setIsHydrated] = useState(false);
 
-    // Initialize on first render only
+    
     useEffect(() => {
-        try {
-            // Check if client-side
-            if (typeof window === 'undefined') {
-                return;
-            }
-
-            // Get from local storage by key
-            const item = window.localStorage.getItem(key);
+        setIsHydrated(true);
 
-            // Parse stored json or return initialValue
-            setStoredValue(item ? JSON.parse(item) : initialValue);
+        try {
+            const item = localStorage.getItem(key);
+            const parsedItem: T = item ? JSON.parse(item) : initialValue;
+            setStoredValue(parsedItem);
         } catch (error) {
-            // If error, use the initial value
             console.error('Error reading from localStorage:', error);
             setStoredValue(initialValue);
         }
     }, [key, initialValue]);
 
-    // Function to update stored value
+    
     const setValue = (value: T): void => {
         try {
-            // Save state
+    
             setStoredValue(value);
 
-            // Check if client-side
-            if (typeof window === 'undefined') {
-                return;
+    
+            if (isHydrated) {
+                localStorage.setItem(key, JSON.stringify(value));
             }
-
-            // Save to local storage
-            window.localStorage.setItem(key, JSON.stringify(value));
         } catch (error) {
             console.error('Error writing to localStorage:', error);
         }