fix: prevent full body re-render when selecting a sample from Load Sample dropdown

Signed-off-by: surya4419 <[email protected]>

Author: surya4419

src/AgreementHtml.tsx

@@ -4,10 +4,11 @@ import { Spin } from "antd";
 import useAppStore from "./store/store";
 import FullScreenModal from "./components/FullScreenModal";
 
-function AgreementHtml({ loading, isModal }: { loading: boolean; isModal?: boolean }) {
+function AgreementHtml({ isModal }: { isModal?: boolean; loading?: boolean }) {
   const agreementHtml = useAppStore((state) => state.agreementHtml);
   const backgroundColor = useAppStore((state) => state.backgroundColor);
   const textColor = useAppStore((state) => state.textColor);
+  const isLoading = useAppStore((state) => state.isLoading);
 
   return (
     <div
@@ -38,9 +39,9 @@ function AgreementHtml({ loading, isModal }: { loading: boolean; isModal?: boole
       <p style={{ textAlign: "center", color: textColor }}>
         The result of merging the JSON data with the template.
       </p>
-      {loading ? (
-        <div style={{ flex: 1, display: "flex", justifyContent: "center", alignItems: "center" }}>
-          <Spin indicator={<LoadingOutlined style={{ fontSize: 42, color: "#19c6c7" }} spin />} />
+      {isLoading ? (
+        <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }}>
+          <Spin indicator={<LoadingOutlined style={{ fontSize: 42, color: '#19c6c7' }} spin />} />
         </div>
       ) : (
         <div

src/store/store.ts

@@ -23,6 +23,7 @@ interface AppState {
   sampleName: string;
   backgroundColor: string;
   textColor: string;
+  isLoading: boolean;
   setTemplateMarkdown: (template: string) => Promise<void>;
   setEditorValue: (value: string) => void;
   setModelCto: (model: string) => Promise<void>;
@@ -44,8 +45,6 @@ export interface DecompressedData {
   agreementHtml: string;
 }
 
-const rebuildDeBounce = debounce(rebuild, 500);
-
 async function rebuild(template: string, model: string, dataString: string) {
   const modelManager = new ModelManager({ strict: true });
   modelManager.addCTOModel(model, undefined, true);
@@ -69,6 +68,11 @@ async function rebuild(template: string, model: string, dataString: string) {
   );
 }
 
+const rebuildDeBounce = debounce(async (template: string, model: string, data: string) => {
+  const result = await rebuild(template, model, data);
+  return result;
+}, 500);
+
 const useAppStore = create<AppState>()(
   immer(
     devtools((set, get) => ({
@@ -83,6 +87,7 @@ const useAppStore = create<AppState>()(
       editorAgreementData: JSON.stringify(playground.DATA, null, 2),
       agreementHtml: "",
       error: undefined,
+      isLoading: false,
       samples: SAMPLES,
       init: async () => {
         const params = new URLSearchParams(window.location.search);
@@ -108,16 +113,21 @@ const useAppStore = create<AppState>()(
             editorAgreementData: JSON.stringify(sample.DATA, null, 2),
           }));
           get().rebuild();
-          
         }
       },
       rebuild: async () => {
-        const { templateMarkdown, modelCto, data } = get();
+        set(() => ({ isLoading: true }));
         try {
-          const result = await rebuildDeBounce(templateMarkdown, modelCto, data);
+          const result = await rebuildDeBounce(
+            get().templateMarkdown,
+            get().modelCto,
+            get().data
+          );
           set(() => ({ agreementHtml: result, error: undefined }));
         } catch (error: any) {
           set(() => ({ error: error instanceof Error ? error.message : 'Unknown error' }));
+        } finally {
+          set(() => ({ isLoading: false }));
         }
       },
       setTemplateMarkdown: async (template: string) => {