fix: eliminate one-frame flash of title without form content in data source pages (#17214)

web/src/pages/user-setting/data-source/add-datasource-modal.tsx

@@ -1,7 +1,7 @@
 import { DynamicForm, FormFieldConfig } from '@/components/dynamic-form';
 import { Modal } from '@/components/ui/modal/modal';
 import { IModalProps } from '@/interfaces/common';
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import {
@@ -21,17 +21,27 @@ const AddDataSourceModal = ({
   onOk,
 }: IModalProps<FieldValues> & { sourceData?: IDataSorceInfo }) => {
   const { t } = useTranslation();
-  const [fields, setFields] = useState<FormFieldConfig[]>([]);
-
-  useEffect(() => {
-    if (sourceData) {
-      setFields([
-        ...getDataSourceFormBaseFields(t),
-        ...getDataSourceFieldsWithExtras(t, sourceData.id as any),
-      ] as FormFieldConfig[]);
+  const fields = useMemo<FormFieldConfig[]>(() => {
+    if (!sourceData) {
+      return [];
     }
+    return [
+      ...getDataSourceFormBaseFields(t),
+      ...getDataSourceFieldsWithExtras(t, sourceData.id as any),
+    ] as FormFieldConfig[];
   }, [sourceData, t]);
 
+  const defaultValues = useMemo<FieldValues>(
+    () =>
+      mergeDataSourceFormValues(
+        DataSourceFormDefaultValues[
+          sourceData?.id as keyof typeof DataSourceFormDefaultValues
+        ] as FieldValues,
+        getCommonExtraDefaultValues(),
+      ) as FieldValues,
+    [sourceData],
+  );
+
   const handleOk = async (values?: FieldValues) => {
     await onOk?.(values);
     hideModal?.();
@@ -58,14 +68,7 @@ const AddDataSourceModal = ({
         onSubmit={(data) => {
           console.log(data);
         }}
-        defaultValues={
-          mergeDataSourceFormValues(
-            DataSourceFormDefaultValues[
-              sourceData?.id as keyof typeof DataSourceFormDefaultValues
-            ] as FieldValues,
-            getCommonExtraDefaultValues(),
-          ) as FieldValues
-        }
+        defaultValues={defaultValues}
         labelClassName="font-normal"
       >
         <div className=" absolute bottom-0 right-0 left-0 flex items-center justify-end w-full gap-2 py-6 px-6">

web/src/pages/user-setting/data-source/data-source-detail-page/index.tsx

@@ -44,13 +44,7 @@ const SourceDetailPage = () => {
     }
   }, [detail, dataSourceInfo]);
 
-  const [fields, setFields] = useState<FormFieldConfig[]>([]);
   const [isDirty, setIsDirty] = useState(false);
-  const [defaultValues, setDefaultValues] = useState<FieldValues>(
-    DataSourceFormDefaultValues[
-      detail?.source as keyof typeof DataSourceFormDefaultValues
-    ] as FieldValues,
-  );
 
   const customFields = useMemo(() => {
     return [
@@ -115,6 +109,38 @@ const SourceDetailPage = () => {
     ];
   }, [t]);
 
+  const fields = useMemo<FormFieldConfig[]>(() => {
+    if (!detail) {
+      return [];
+    }
+    const baseFields = getDataSourceFormBaseFields(t).map((field) =>
+      field.name === 'name' ? { ...field, disabled: true } : { ...field },
+    );
+    const allFields = [
+      ...baseFields,
+      ...getDataSourceFieldsWithExtras(t, detail.source as any),
+      ...customFields,
+    ] as FormFieldConfig[];
+    return allFields.map((field) => ({
+      ...field,
+      horizontal: true,
+      onChange: undefined,
+    }));
+  }, [detail, customFields, t]);
+
+  const defaultValues = useMemo<FieldValues>(() => {
+    if (!detail) {
+      return {};
+    }
+    return mergeDataSourceFormValues(
+      DataSourceFormDefaultValues[
+        detail.source as keyof typeof DataSourceFormDefaultValues
+      ] as FieldValues,
+      getCommonExtraDefaultValues(),
+      detail as FieldValues,
+    );
+  }, [detail]);
+
   const { addLoading, handleAddOk } = useAddDataSource({ isEdit: true });
   const { loading: testLoading, handleTest } = useTestDataSource();
 
@@ -171,47 +197,8 @@ const SourceDetailPage = () => {
   }, [actionMode, t]);
 
   useEffect(() => {
-    const baseFields = getDataSourceFormBaseFields(t).map((field) => {
-      if (field.name === 'name') {
-        return {
-          ...field,
-          disabled: true,
-        };
-      } else {
-        return {
-          ...field,
-        };
-      }
-    });
-    if (detail) {
-      const fields = [
-        ...baseFields,
-        ...getDataSourceFieldsWithExtras(t, detail.source as any),
-        ...customFields,
-      ] as FormFieldConfig[];
-
-      const newFields = fields.map((field) => {
-        return {
-          ...field,
-          horizontal: true,
-          onChange: undefined,
-        };
-      });
-      setFields(newFields);
-
-      const defaultValueTemp = {
-        ...mergeDataSourceFormValues(
-          DataSourceFormDefaultValues[
-            detail?.source as keyof typeof DataSourceFormDefaultValues
-          ] as FieldValues,
-          getCommonExtraDefaultValues(),
-          detail as FieldValues,
-        ),
-      };
-      setDefaultValues(defaultValueTemp);
-      setIsDirty(false);
-    }
-  }, [detail, customFields, onSubmit, t]);
+    setIsDirty(false);
+  }, [detail]);
 
   useEffect(() => {
     const instance = formRef.current;