add loader for loading scripts (chartdb#265)

hardspoon · Oct 8, 2024 · 5956018 · 5956018
1 parent d351275
commit 5956018
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 27 deletions.
diff --git a/src/components/code-snippet/code-snippet.tsx b/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 />}>
-                <CopyBlock
-                    language={language}
-                    text={code}
-                    customStyle={{
-                        display: 'flex',
-                        flex: '1',
-                        fontSize: '14px',
-                        width: '100%',
-                    }}
-                    {...codeProps}
-                />
-            </Suspense>
+            {loading ? (
+                <Spinner />
+            ) : (
+                <Suspense fallback={<Spinner />}>
+                    <CopyBlock
+                        language={language}
+                        text={code}
+                        customStyle={{
+                            display: 'flex',
+                            flex: '1',
+                            fontSize: '14px',
+                            width: '100%',
+                        }}
+                        {...codeProps}
+                    />
+                </Suspense>
+            )}
         </div>
     )
 );

diff --git a/src/dialogs/common/import-database/import-database.tsx b/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]({
-                                    databaseEdition,
-                                    databaseClient,
-                                })}
+                                loading={!importMetadataScripts}
+                                code={
+                                    importMetadataScripts?.[databaseType]?.({
+                                        databaseEdition,
+                                        databaseClient,
+                                    }) ?? ''
+                                }
                                 language={databaseClient ? 'bash' : 'sql'}
                             />
                         </Tabs>
                     ) : (
                         <CodeSnippet
                             className="max-h-40 w-full"
-                            code={importMetadataScripts[databaseType]({
-                                databaseEdition,
-                            })}
+                            loading={!importMetadataScripts}
+                            code={
+                                importMetadataScripts?.[databaseType]?.({
+                                    databaseEdition,
+                                }) ?? ''
+                            }
                         />
                     )}
                 </div>