From 77189c6d73ff6730b21dc2eda5007f86dfde77a3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 26 Jan 2021 09:48:41 +0000
Subject: [PATCH] Hide repeater placeholders when not running inside the
 builder or when the component hasn't been initialised fully

---
 packages/client/src/sdk.js                   |  2 ++
 packages/standard-components/src/List.svelte | 22 +++++++++++---------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js
index 98cff20679..b5efe1257c 100644
--- a/packages/client/src/sdk.js
+++ b/packages/client/src/sdk.js
@@ -5,6 +5,7 @@ import {
   routeStore,
   screenStore,
   bindingStore,
+  builderStore,
 } from "./store"
 import { styleable } from "./utils/styleable"
 import { linkable } from "./utils/linkable"
@@ -16,6 +17,7 @@ export default {
   notifications: notificationStore,
   routeStore,
   screenStore,
+  builderStore,
   styleable,
   linkable,
   DataProvider,
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 7d5955904b..9ee59a79b7 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -2,12 +2,13 @@
   import { getContext } from "svelte"
   import { isEmpty } from "lodash/fp"
 
-  const { API, styleable, DataProvider } = getContext("sdk")
+  const { API, styleable, DataProvider, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let datasource = []
 
   let rows = []
+  let loaded = false
 
   $: fetchData(datasource)
 
@@ -15,21 +16,22 @@
     if (!isEmpty(datasource)) {
       rows = await API.fetchDatasource(datasource)
     }
+    loaded = true
   }
 </script>
 
 <div use:styleable={$component.styles}>
   {#if rows.length > 0}
-    {#each rows as row}
-      <DataProvider {row}>
-        {#if $component.children === 0}
-          <p>Add some components too.</p>
-        {:else}
+    {#if $component.children === 0 && $builderStore.inBuilder}
+      <p>Add some components too</p>
+    {:else}
+      {#each rows as row}
+        <DataProvider {row}>
           <slot />
-        {/if}
-      </DataProvider>
-    {/each}
-  {:else}
+        </DataProvider>
+      {/each}
+    {/if}
+  {:else if loaded && $builderStore.inBuilder}
     <p>Feed me some data</p>
   {/if}
 </div>