add loader for loading scripts (#265)

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

@@ -8,6 +8,7 @@ export interface CodeSnippetProps {
     codeProps?: CopyBlockProps;
     code: string;
     language?: 'sql' | 'bash';
+    loading?: boolean;
 }
 
 const CopyBlock = React.lazy(() =>
@@ -19,21 +20,25 @@ const CopyBlock = React.lazy(() =>
 );
 
 export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
-    ({ className, codeProps, code, language = 'sql' }) => (
+    ({ className, codeProps, code, loading, language = 'sql' }) => (
         <div className={cn('flex flex-1 justify-center', className)}>
-            <Suspense fallback={<Spinner />}>
+            {loading ? (
-                <CopyBlock
+                <Spinner />
-                    language={language}
+            ) : (
-                    text={code}
+                <Suspense fallback={<Spinner />}>
-                    customStyle={{
+                    <CopyBlock
-                        display: 'flex',
+                        language={language}
-                        flex: '1',
+                        text={code}
-                        fontSize: '14px',
+                        customStyle={{
-                        width: '100%',
+                            display: 'flex',
-                    }}
+                            flex: '1',
-                    {...codeProps}
+                            fontSize: '14px',
-                />
+                            width: '100%',
-            </Suspense>
+                        }}
+                        {...codeProps}
+                    />
+                </Suspense>
+            )}
         </div>
     )
 );

src/dialogs/common/import-database/import-database.tsx

@@ -71,12 +71,7 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
     >();
     const { t } = useTranslation();
     const [importMetadataScripts, setImportMetadataScripts] =
-        useState<ImportMetadataScripts>(
+        useState<ImportMetadataScripts | null>(null);
-            Object.values(DatabaseType).reduce((acc, val) => {
-                acc[val] = () => '';
-                return acc;
-            }, {} as ImportMetadataScripts)
-        );
 
     useEffect(() => {
         const loadScripts = async () => {
@@ -252,19 +247,25 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                             </div>
                             <CodeSnippet
                                 className="max-h-40 w-full"
-                                code={importMetadataScripts[databaseType]({
+                                loading={!importMetadataScripts}
-                                    databaseEdition,
+                                code={
-                                    databaseClient,
+                                    importMetadataScripts?.[databaseType]?.({
-                                })}
+                                        databaseEdition,
+                                        databaseClient,
+                                    }) ?? ''
+                                }
                                 language={databaseClient ? 'bash' : 'sql'}
                             />
                         </Tabs>
                     ) : (
                         <CodeSnippet
                             className="max-h-40 w-full"
-                            code={importMetadataScripts[databaseType]({
+                            loading={!importMetadataScripts}
-                                databaseEdition,
+                            code={
-                            })}
+                                importMetadataScripts?.[databaseType]?.({
+                                    databaseEdition,
+                                }) ?? ''
+                            }
                         />
                     )}
                 </div>