fix(console): reduce refresh frequency in preview (#950)

* fix(console): reduce refresh frequancy in preview

* fix: reset only when is not dirty

* fix: usePrevewConfigs

packages/console/src/pages/SignInExperience/components/GuideModal.tsx

@@ -15,6 +15,7 @@ import useAdminConsoleConfigs from '@/hooks/use-configs';
 import Close from '@/icons/Close';
 import * as modalStyles from '@/scss/modal.module.scss';
 
+import usePreviewConfigs from '../hooks';
 import { SignInExperienceForm } from '../types';
 import { signInExperienceParser } from '../utilities';
 import BrandingForm from './BrandingForm';
@@ -36,18 +37,20 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
   const {
     reset,
     handleSubmit,
-    formState: { isSubmitting },
+    formState: { isSubmitting, isDirty },
     watch,
   } = methods;
   const api = useApi();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const formData = watch();
 
+  const previewConfigs = usePreviewConfigs(formData, isDirty, data);
+
   useEffect(() => {
-    if (data) {
+    if (data && !isDirty) {
       reset(signInExperienceParser.toLocalForm(data));
     }
-  }, [data, reset]);
+  }, [data, reset, isDirty]);
 
   const onGotIt = async () => {
     if (!configs) {
@@ -114,10 +117,7 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
                   </div>
                 </div>
                 {formData.id && (
-                  <Preview
-                    signInExperience={signInExperienceParser.toRemoteModel(formData)}
-                    className={styles.preview}
-                  />
+                  <Preview signInExperience={previewConfigs} className={styles.preview} />
                 )}
               </div>
               <div className={styles.footer}>

packages/console/src/pages/SignInExperience/components/Preview.tsx

@@ -15,7 +15,7 @@ import PhoneInfo from '@/icons/PhoneInfo';
 import * as styles from './Preview.module.scss';
 
 type Props = {
-  signInExperience: SignInExperience;
+  signInExperience?: SignInExperience;
   className?: string;
 };
 
@@ -28,7 +28,7 @@ const Preview = ({ signInExperience, className }: Props) => {
   const previewRef = useRef<HTMLIFrameElement>(null);
 
   const config = useMemo(() => {
-    if (!allConnectors) {
+    if (!allConnectors || !signInExperience) {
       return;
     }
 

packages/console/src/pages/SignInExperience/hooks.ts

@@ -0,0 +1,21 @@
+import { SignInExperience } from '@logto/schemas';
+import { useMemo } from 'react';
+
+import { SignInExperienceForm } from './types';
+import { signInExperienceParser } from './utilities';
+
+const usePreviewConfigs = (
+  formData: SignInExperienceForm,
+  isDirty: boolean,
+  data?: SignInExperience
+) => {
+  return useMemo(() => {
+    if (!isDirty) {
+      return data;
+    }
+
+    return signInExperienceParser.toRemoteModel(formData);
+  }, [formData, isDirty, data]);
+};
+
+export default usePreviewConfigs;

packages/console/src/pages/SignInExperience/index.tsx

@@ -24,6 +24,7 @@ import SaveAlert from './components/SaveAlert';
 import SignInMethodsForm from './components/SignInMethodsForm';
 import TermsForm from './components/TermsForm';
 import Welcome from './components/Welcome';
+import usePreviewConfigs from './hooks';
 import * as styles from './index.module.scss';
 import { SignInExperienceForm } from './types';
 import { compareSignInMethods, signInExperienceParser } from './utilities';
@@ -41,16 +42,18 @@ const SignInExperience = () => {
     handleSubmit,
     getValues,
     watch,
-    formState: { isSubmitting },
+    formState: { isSubmitting, isDirty },
   } = methods;
   const api = useApi();
   const formData = watch();
 
+  const previewConfigs = usePreviewConfigs(formData, isDirty, data);
+
   useEffect(() => {
-    if (data) {
+    if (data && !isDirty) {
       reset(signInExperienceParser.toLocalForm(data));
     }
-  }, [data, reset]);
+  }, [data, reset, isDirty]);
 
   const saveData = async () => {
     const updatedData = await api
@@ -138,7 +141,7 @@ const SignInExperience = () => {
           )}
         </Card>
       </div>
-      {formData.id && <Preview signInExperience={signInExperienceParser.toRemoteModel(formData)} />}
+      {formData.id && <Preview signInExperience={previewConfigs} />}
       {data && (
         <ReactModal
           isOpen={Boolean(dataToCompare)}