Reduce state updates when selecting screens

packages/builder/src/builderStore/store/frontend.js

@@ -61,6 +61,10 @@ const INITIAL_FRONTEND_STATE = {
 export const getFrontendStore = () => {
   const store = writable({ ...INITIAL_FRONTEND_STATE })
 
+  store.subscribe(state => {
+    console.log("new state")
+  })
+
   store.actions = {
     reset: () => {
       store.set({ ...INITIAL_FRONTEND_STATE })
@@ -184,12 +188,24 @@ export const getFrontendStore = () => {
     },
     screens: {
       select: screenId => {
-        store.update(state => {
-          let screens = state.screens
-          let screen =
-            screens.find(screen => screen._id === screenId) || screens[0]
-          if (!screen) return state
+        // Check this screen exists
+        const state = get(store)
+        const screen = state.screens.find(screen => screen._id === screenId)
+        console.log(screen)
+        if (!screen) {
+          return
+        }
 
+        // Check screen isn't already selected
+        if (
+          state.selectedScreenId === screen._id &&
+          state.selectedComponentId === screen.props?._id
+        ) {
+          return
+        }
+
+        // Select new screen
+        store.update(state => {
           state.selectedScreenId = screen._id
           state.selectedComponentId = screen.props?._id
           return state

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte

@@ -17,7 +17,8 @@
         getOptionValue={x => x._id}
         getOptionIcon={x => (x.routing.homeScreen ? "Home" : "WebPage")}
         getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
-        bind:value={$store.selectedScreenId}
+        value={$store.selectedScreenId}
+        on:change={e => store.actions.screens.select(e.detail)}
       />
     </div>
     <div class="header-right">

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte

@@ -60,7 +60,7 @@
       indentLevel={0}
       selected={$store.selectedScreenId === screen._id}
       text={screen.routing.route}
-      on:click={() => ($store.selectedScreenId = screen._id)}
+      on:click={() => store.actions.screens.select(screen._id)}
       color={RoleUtils.getRoleColour(screen.routing.roleId)}
     >
       <ScreenDropdownMenu screenId={screen._id} />