From 68ca4ae7a8300d735e1080a7fbfe97481edf047c Mon Sep 17 00:00:00 2001
From: Darcy Ye <darcyye@silverhand.io>
Date: Tue, 14 Mar 2023 12:44:41 +0800
Subject: [PATCH] feat(console): add custom css editor debounce (#3378)

---
 .../hooks/use-preview-configs.ts              | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/console/src/pages/SignInExperience/hooks/use-preview-configs.ts b/packages/console/src/pages/SignInExperience/hooks/use-preview-configs.ts
index c869ede9c..40a787522 100644
--- a/packages/console/src/pages/SignInExperience/hooks/use-preview-configs.ts
+++ b/packages/console/src/pages/SignInExperience/hooks/use-preview-configs.ts
@@ -1,5 +1,7 @@
 import type { SignInExperience } from '@logto/schemas';
-import { useMemo } from 'react';
+import { useEffect, useState, useMemo } from 'react';
+
+import useDebounce from '@/hooks/use-debounce';
 
 import type { SignInExperienceForm } from '../types';
 import { signInExperienceParser } from '../utils/form';
@@ -7,15 +9,29 @@ import { signInExperienceParser } from '../utils/form';
 const usePreviewConfigs = (
   formData: SignInExperienceForm,
   isDirty: boolean,
-  data?: SignInExperience
+  data?: SignInExperience,
+  timeDelay = 2000 // Render the preview after the user stops typing in the custom CSS editing box for two seconds.
 ) => {
+  const debounce = useDebounce(timeDelay);
+  const { customCss, ...restFormData } = formData;
+  const [debouncedCustomCss, setDebouncedCustomCss] = useState(customCss);
+
+  useEffect(() => {
+    debounce(() => {
+      setDebouncedCustomCss(customCss);
+    });
+  }, [debounce, customCss]);
+
   return useMemo(() => {
     if (!isDirty) {
       return data;
     }
 
-    return signInExperienceParser.toRemoteModel(formData);
-  }, [formData, isDirty, data]);
+    return signInExperienceParser.toRemoteModel({
+      ...restFormData,
+      customCss: debouncedCustomCss,
+    });
+  }, [restFormData, debouncedCustomCss, isDirty, data]);
 };
 
 export default usePreviewConfigs;