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,8 +20,11 @@ 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)}>
+            {loading ? (
+                <Spinner />
+            ) : (
                 <Suspense fallback={<Spinner />}>
                     <CopyBlock
                         language={language}
@@ -34,6 +38,7 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
                         {...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>(
-            Object.values(DatabaseType).reduce((acc, val) => {
-                acc[val] = () => '';
-                return acc;
-            }, {} as ImportMetadataScripts)
-        );
+        useState<ImportMetadataScripts | null>(null);
 
     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}
+                                code={
+                                    importMetadataScripts?.[databaseType]?.({
                                         databaseEdition,
                                         databaseClient,
-                                })}
+                                    }) ?? ''
+                                }
                                 language={databaseClient ? 'bash' : 'sql'}
                             />
                         </Tabs>
                     ) : (
                         <CodeSnippet
                             className="max-h-40 w-full"
-                            code={importMetadataScripts[databaseType]({
+                            loading={!importMetadataScripts}
+                            code={
+                                importMetadataScripts?.[databaseType]?.({
                                     databaseEdition,
-                            })}
+                                }) ?? ''
+                            }
                         />
                     )}
                 </div>