From cae514ca0622c689c01990e8bdc4b3bfa21a6849 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 15:41:20 +0100
Subject: [PATCH] Simplify client app component re-render keying

---
 .../client/src/components/Component.svelte    | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 3d863c276e..faf0226604 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -65,6 +65,7 @@
   $: inSelectedPath = $builderStore.selectedComponentPath?.includes(id)
   $: evaluateConditions(enrichedSettings?._conditions)
   $: componentSettings = { ...enrichedSettings, ...conditionalSettings }
+  $: renderKey = `${propsHash}-${emptyState}`
 
   // Update component context
   $: componentStore.set({
@@ -176,32 +177,30 @@
   $: droppable = interactive && !isLayout && !isScreen
 </script>
 
-{#key propsHash}
-  {#key empty}
-    {#if constructor && componentSettings && (visible || inSelectedPath)}
-      <!-- The ID is used as a class because getElementsByClassName is O(1) -->
-      <!-- and the performance matters for the selection indicators -->
-      <div
-        class={`component ${id}`}
-        class:draggable
-        class:droppable
-        class:empty
-        class:interactive
-        data-id={id}
-        data-name={name}
-      >
-        <svelte:component this={constructor} {...componentSettings}>
-          {#if children.length}
-            {#each children as child (child._id)}
-              <svelte:self instance={child} />
-            {/each}
-          {:else if emptyState}
-            <Placeholder />
-          {/if}
-        </svelte:component>
-      </div>
-    {/if}
-  {/key}
+{#key renderKey}
+  {#if constructor && componentSettings && (visible || inSelectedPath)}
+    <!-- The ID is used as a class because getElementsByClassName is O(1) -->
+    <!-- and the performance matters for the selection indicators -->
+    <div
+      class={`component ${id}`}
+      class:draggable
+      class:droppable
+      class:empty
+      class:interactive
+      data-id={id}
+      data-name={name}
+    >
+      <svelte:component this={constructor} {...componentSettings}>
+        {#if children.length}
+          {#each children as child (child._id)}
+            <svelte:self instance={child} />
+          {/each}
+        {:else if emptyState}
+          <Placeholder />
+        {/if}
+      </svelte:component>
+    </div>
+  {/if}
 {/key}
 
 <style>