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

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

Author: surya4419

src/components/SampleDropdown.tsx

@@ -1,26 +1,27 @@
 import React from "react";
 import { Button, Dropdown, Space, message, MenuProps } from "antd";
 import { DownOutlined } from "@ant-design/icons";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import useAppStore from "../store/store";
 import { shallow } from "zustand/shallow";
 import { useStoreWithEqualityFn } from "zustand/traditional";
 
-const SampleDropdown = React.memo(function SampleDropdown({
+const SampleDropdown = function SampleDropdown({
   setLoading,
 }: {
   setLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }): JSX.Element {
-  const { samples, loadSample } = useStoreWithEqualityFn(
+  const { samples, loadSample, sampleName } = useStoreWithEqualityFn(
     useAppStore,
     (state) => ({
       samples: state.samples,
       loadSample: state.loadSample as (key: string) => Promise<void>,
+      sampleName: state.sampleName
     }),
     shallow
   );
 
-  const [selectedSample, setSelectedSample] = useState<string | null>(null);
+  
 
   const items: MenuProps["items"] = useMemo(
     () =>
@@ -38,7 +39,7 @@ const SampleDropdown = React.memo(function SampleDropdown({
         try {
           await loadSample(e.key);
           void message.info(`Loaded ${e.key} sample`);
-          setSelectedSample(e.key);
+
         } catch (error) {
           void message.error("Failed to load sample");
         } finally {
@@ -55,11 +56,11 @@ const SampleDropdown = React.memo(function SampleDropdown({
       <Dropdown menu={{ items, onClick: (e) => void handleMenuClick(e) }} trigger={["click"]}>
         <div className="samples-element">
           <Button aria-label="Load sample dropdown">
-            {selectedSample ? selectedSample : "Load Sample"} <DownOutlined />
+            {sampleName || "Load Sample"} <DownOutlined />
           </Button>
         </div>
       </Dropdown>
     </Space>
   );
-})
+}
 export default SampleDropdown;

src/store/store.ts

@@ -89,7 +89,9 @@ const useAppStore = create<AppState>()(
         const compressedData = params.get("data");
         if (compressedData) {
           await get().loadFromLink(compressedData);
-        } 
+        } else {
+          await get().loadSample(playground.NAME);
+        }
       },
       loadSample: async (name: string) => {
         const sample = SAMPLES.find((s) => s.NAME === name);