some mobile & bundle optimizations (#262)

src/components/code-snippet/code-snippet.tsx

@@ -1,35 +1,41 @@
 import { cn } from '@/lib/utils';
-import React from 'react';
-import { CopyBlock, atomOneDark } from 'react-code-blocks';
-import type { CodeBlockProps } from 'react-code-blocks/dist/components/CodeBlock';
+import React, { Suspense } from 'react';
+import type { CopyBlockProps } from 'react-code-blocks/dist/components/CopyBlock';
+import { Spinner } from '../spinner/spinner';
 
 export interface CodeSnippetProps {
     className?: string;
-    codeProps?: CodeBlockProps;
+    codeProps?: CopyBlockProps;
     code: string;
     language?: 'sql' | 'bash';
 }
 
-export const CodeSnippet: React.FC<CodeSnippetProps> = ({
-    className,
-    codeProps,
-    code,
-    language = 'sql',
-}) => {
-    return (
-        <div className={cn('flex flex-1', className)}>
-            <CopyBlock
-                language={language}
-                text={code}
-                theme={atomOneDark}
-                customStyle={{
-                    display: 'flex',
-                    flex: '1',
-                    fontSize: '14px',
-                    width: '100%',
-                }}
-                {...codeProps}
-            />
+const CopyBlock = React.lazy(() =>
+    import('react-code-blocks').then((module) => ({
+        default: (props: CopyBlockProps) => (
+            <module.CopyBlock {...props} theme={module.atomOneDark} />
+        ),
+    }))
+);
+
+export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
+    ({ className, codeProps, code, language = 'sql' }) => (
+        <div className={cn('flex flex-1 justify-center', className)}>
+            <Suspense fallback={<Spinner />}>
+                <CopyBlock
+                    language={language}
+                    text={code}
+                    customStyle={{
+                        display: 'flex',
+                        flex: '1',
+                        fontSize: '14px',
+                        width: '100%',
+                    }}
+                    {...codeProps}
+                />
+            </Suspense>
         </div>
-    );
-};
+    )
+);
+
+CodeSnippet.displayName = 'CodeSnippet';