Bug Report 🐛

When selecting an option from the "Load Sample" dropdown, the entire body section re-renders, causing unnecessary reloads.

Expected Behavior

Only the relevant section (e.g., the editor or preview panel) should update when a sample is loaded. The rest of the UI should remain unchanged to improve performance and user experience.

Current Behavior

• The entire body section reloads instead of just updating the required component.
• This leads to unnecessary API calls and potential UI flickering.
• Performance is affected due to repeated re-renders.

Possible Solution

• Optimize state management so that only the necessary components update.
• Use React.memo, useMemo, or useCallback to prevent unnecessary renders.
• Ensure the API call for fetching sample data does not trigger a full-page update.

Steps to Reproduce

1. Open the application.
2. Navigate to the "Load Sample" dropdown.
3. Select any sample from the dropdown list.
4. Observe that the entire body reloads instead of just updating the relevant section.

Context (Environment)

Desktop

• OS: [e.g., Windows 11]
• Browser: [e.g., Chrome 120.0.6099.71]
• Version: [e.g., 0.22.15]

Detailed Description

The issue seems to be caused by a state update at a higher level, leading to a full component tree re-render. It should be scoped only to the affected components, avoiding unnecessary re-renders and redundant API calls.

Possible Implementation

• Refactor the Load Sample state to be more granular.
• Utilize React Context or useReducer to manage the data efficiently.
• Avoid setting state in a way that forces a complete re-render of the parent container.