Hide repeater placeholders when not running inside the builder or when the component hasn't been initialised fully

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,

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}
+    {#if $component.children === 0 && $builderStore.inBuilder}
-      <DataProvider {row}>
+      <p>Add some components too</p>
-        {#if $component.children === 0}
+    {:else}
-          <p>Add some components too.</p>
+      {#each rows as row}
-        {:else}
+        <DataProvider {row}>
           <slot />
-        {/if}
+        </DataProvider>
-      </DataProvider>
+      {/each}
-    {/each}
+    {/if}
-  {:else}
+  {:else if loaded && $builderStore.inBuilder}
     <p>Feed me some data</p>
   {/if}
 </div>