Fix(Layout Shift Fix) - Resolved Layout Issues on DarkMode Toggle Button and Full-Screen Modal

package.json

@@ -72,7 +72,7 @@
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "typescript": "^5.1.6",
-    "vite": "^4.5.6",
+    "vite": "^4.5.5",
     "vite-plugin-node-polyfills": "^0.9.0",
     "vite-plugin-node-stdlib-browser": "^0.2.1",
     "vitest": "^1.6.0"

src/App.tsx

@@ -157,7 +157,7 @@ const App = () => {
                             marginBottom: "10px",
                           }}
                         >
-                          <div style={{ display: "flex" }}>
+                          <div style={{ display: "flex", justifyContent: "space-between" }}>
                             <ToggleDarkMode />
                             <FullScreenModal />
                           </div>

src/components/FullScreenModal.tsx

@@ -31,7 +31,7 @@ const FullScreenModal: React.FC = () => {
   }, [textColor, backgroundColor]);
 
   return (
-    <div style={{ textAlign: "right", display: "flex", alignItems: "center", justifyContent: "flex-end", width: "100%", color: textColor, }} className="preview-element">
+    <div style={{ textAlign: "right", display: "flex", alignItems: "center", justifyContent: "flex-end", color: textColor, }} className="preview-element">
       <FullscreenOutlined
         style={{ fontSize: "24px", cursor: "pointer", marginRight: "10px" }}
         onClick={() => setOpen(true)}

src/components/SampleDropdown.tsx

@@ -1,47 +1,62 @@
-import { Button, Dropdown, Space, message } from "antd";
+import { Button, Dropdown, Space, message, MenuProps } from "antd";
 import { DownOutlined } from "@ant-design/icons";
-
+import { memo, useCallback, useMemo, useState } from "react";
 import useAppStore from "../store/store";
+import { shallow } from "zustand/shallow";
 
-function SampleDropdown({ setLoading }: { setLoading: any }) {
-  const samples = useAppStore((state) => state.samples);
-  const loadSample = useAppStore((state) => state.loadSample);
+function SampleDropdown({
+  setLoading,
+}: {
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+}): JSX.Element {
+  const { samples, loadSample } = useAppStore(
+    (state) => ({
+      samples: state.samples,
+      loadSample: state.loadSample as (key: string) => Promise<void>,
+    }),
+    shallow
+  );
 
-  const items = samples.map((s) => ({
-    label: s.NAME,
-    key: s.NAME,
-  }));
+  const [selectedSample, setSelectedSample] = useState<string | null>(null);
 
-  const handleMenuClick = async (e: any) => {
-    if (e.key) {
-      setLoading(true);
-      try {
-        await loadSample(e.key);
-        message.info(`Loaded ${e.key} sample`);
-      } catch (error) {
-        message.error("Failed to load sample");
-      } finally {
-        setLoading(false);
-      }
-    }
-  };
+  const items: MenuProps["items"] = useMemo(
+    () =>
+      samples.map((s) => ({
+        label: s.NAME,
+        key: s.NAME,
+      })),
+    [samples]
+  );
 
-  const menuProps = {
-    items,
-    onClick: handleMenuClick,
-  };
+  const handleMenuClick = useCallback(
+    async (e: any) => {
+      if (e.key) {
+        setLoading(true);
+        try {
+          await loadSample(e.key);
+          message.info(`Loaded ${e.key} sample`);
+          setSelectedSample(e.key);
+        } catch (error) {
+          message.error("Failed to load sample");
+        } finally {
+          setLoading(false);
+        }
+      }
+    },
+    [loadSample, setLoading]
+  );
 
   return (
     <Space>
-      <Dropdown menu={menuProps} trigger={["click"]}>
+      <Dropdown menu={{ items, onClick: handleMenuClick }} trigger={["click"]}>
         <div className="samples-element">
           <Button>
-            Load Sample <DownOutlined />
+            {selectedSample ? selectedSample : "Load Sample"} <DownOutlined />
           </Button>
         </div>
       </Dropdown>
     </Space>
   );
 }
 
-export default SampleDropdown;
+export default memo(SampleDropdown);

src/store/store.ts

@@ -44,6 +44,8 @@ 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);
@@ -67,8 +69,6 @@ async function rebuild(template: string, model: string, dataString: string) {
   );
 }
 
-const rebuildDeBounce = debounce(rebuild, 500);
-
 const useAppStore = create<AppState>()(
   immer(
     devtools((set, get) => ({
@@ -120,45 +120,42 @@ const useAppStore = create<AppState>()(
         }
       },
       rebuild: async () => {
+        const { templateMarkdown, modelCto, data } = get();
         try {
-          const result = await rebuildDeBounce(
-            get().templateMarkdown,
-            get().modelCto,
-            get().data
-          );
+          const result = await rebuildDeBounce(templateMarkdown, modelCto, data);
           set(() => ({ agreementHtml: result, error: undefined }));
         } catch (error: any) {
           set(() => ({ error: formatError(error) }));
         }
       },
       setTemplateMarkdown: async (template: string) => {
+        const { modelCto, data } = get();
         try {
-          const result = await rebuildDeBounce(
-            template,
-            get().modelCto,
-            get().data
-          );
-          set(() => ({ agreementHtml: result, error: undefined }));
+          const result = await rebuildDeBounce(template, modelCto, data);
+          set(() => ({
+            templateMarkdown: template,
+            agreementHtml: result,
+            error: undefined,
+          }));
         } catch (error: any) {
           set(() => ({ error: formatError(error) }));
         }
-        set(() => ({ templateMarkdown: template }));
       },
       setEditorValue: (value: string) => {
         set(() => ({ editorValue: value }));
       },
       setModelCto: async (model: string) => {
+        const { templateMarkdown, data } = get();
         try {
-          const result = await rebuildDeBounce(
-            get().templateMarkdown,
-            model,
-            get().data
-          );
-          set(() => ({ agreementHtml: result, error: undefined }));
+          const result = await rebuildDeBounce(templateMarkdown, model, data);
+          set(() => ({
+            modelCto: model,
+            agreementHtml: result,
+            error: undefined,
+          }));
         } catch (error: any) {
           set(() => ({ error: formatError(error) }));
         }
-        set(() => ({ modelCto: model }));
       },
       setEditorModelCto: (value: string) => {
         set(() => ({ editorModelCto: value }));

src/styles/components/ToggleDarkMode.ts

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export const ToggleDarkModeContainer = styled.div`
 .dark-mode-toggle {
-    overflow: visible !important;
+    overflow: hidden !important;
     display: flex;
     padding-left: 10px !important;
   }