From fa42acaaf8f7e56ab97411134765fd161528cc6d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 14 Jul 2022 16:24:16 +0100
Subject: [PATCH] Reduce state updates when selecting layouts

---
 .../src/builderStore/store/frontend.js        | 19 ++++++++++++++++---
 .../_components/LayoutListPanel.svelte        |  2 +-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 6d836dad65..53189b03f2 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -331,10 +331,23 @@ export const getFrontendStore = () => {
     },
     layouts: {
       select: layoutId => {
+        // Check this layout exists
+        const state = get(store)
+        const layout = store.actions.layouts.find(layoutId)
+        if (!layout) {
+          return
+        }
+
+        // Check layout isn't already selected
+        if (
+          state.selectedLayoutId === layout._id &&
+          state.selectedComponentId === layout.props?._id
+        ) {
+          return
+        }
+
+        // Select new layout
         store.update(state => {
-          const layout =
-            store.actions.layouts.find(layoutId) || get(store).layouts[0]
-          if (!layout) return
           state.selectedLayoutId = layout._id
           state.selectedComponentId = layout.props?._id
           return state
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
index fd38f08ceb..cc895317fd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
@@ -13,7 +13,7 @@
         indentLevel={0}
         selected={$store.selectedLayoutId === layout._id}
         text={layout.name}
-        on:click={() => ($store.selectedLayoutId = layout._id)}
+        on:click={() => store.actions.layouts.select(layout._id)}
       >
         <LayoutDropdownMenu {layout} />
       </NavItem>