Improve component empty states and fix selection indicator lockup bug. Fix data provider not exporting loaded context

packages/client/package.json

@@ -19,19 +19,16 @@
   },
   "dependencies": {
     "@budibase/bbui": "^0.9.27",
+    "@budibase/standard-components": "^0.9.41",
     "@budibase/string-templates": "^0.9.41",
-    "regexparam": "^1.3.0",
     "shortid": "^2.2.15",
     "svelte-spa-router": "^3.0.5"
   },
   "devDependencies": {
-    "@budibase/standard-components": "^0.9.41",
+    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
+    "postcss": "^8.3.2",
-    "fs-extra": "^8.1.0",
+    "rollup": "^2.51.2",
-    "jsdom": "^16.0.1",
-    "postcss": "^8.2.10",
-    "rollup": "^2.44.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-globals": "^1.4.0",

packages/client/src/components/preview/IndicatorSet.svelte

@@ -58,9 +58,17 @@
     const scrollY = window.scrollY
 
     // Extract valid children
+    // Sanity limit of 100 active indicators
     const children = Array.from(parents)
       .map(parent => parent?.childNodes?.[0])
       .filter(child => child != null)
+      .slice(0, 100)
+
+    // If there aren't any nodes then reset
+    if (!children.length) {
+      indicators = []
+      updating = false
+    }
 
     children.forEach((child, idx) => {
       const callback = createIntersectionCallback(idx)

packages/client/src/utils/styleable.js

@@ -37,7 +37,7 @@ export const styleable = (node, styles = {}) => {
     const applyStyles = styleString => {
       // Apply empty border if required
       if (newStyles.empty) {
-        styleString += "border: 2px dashed rgba(0, 0, 0, 0.25);"
+        styleString += "border: 2px dashed var(--grey-5);"
       }
 
       node.style = styleString

packages/standard-components/manifest.json

@@ -163,7 +163,7 @@
         "type": "text",
         "label": "Empty Text",
         "key": "noRowsMessage",
-        "defaultValue": "No rows found."
+        "defaultValue": "No rows found"
       },
       {
         "type": "filter",

packages/standard-components/src/DataProvider.svelte

@@ -8,7 +8,6 @@
     luceneLimit,
   } from "./lucene"
   import Placeholder from "./Placeholder.svelte"
-  import Container from "./Container.svelte"
 
   export let dataSource
   export let filter
@@ -24,7 +23,8 @@
   let loading = false
 
   // Loading flag for the initial load
-  let loaded = false
+  // Mark as loaded if we have no datasource so we don't stall forever
+  let loaded = !dataSource
   let schemaLoaded = false
 
   // Provider state
@@ -89,6 +89,7 @@
     // bindings, but are used internally by other components
     id: $component?.id,
     state: { query },
+    loaded,
   }
 
   const getSortType = (schema, sortColumn) => {

packages/standard-components/src/Placeholder.svelte

@@ -15,7 +15,8 @@
 
 <style>
   div {
-    padding: 20px;
+    color: var(--grey-6);
-    color: #888;
+    font-size: var(--font-size-s);
+    padding: var(--spacing-l);
   }
 </style>

packages/standard-components/src/Repeater.svelte

@@ -11,6 +11,8 @@
 
   $: rows = dataProvider?.rows ?? []
   $: loaded = dataProvider?.loaded ?? false
+
+  $: console.log(loaded)
 </script>
 
 <div use:styleable={$component.styles}>
@@ -23,6 +25,21 @@
       </Provider>
     {/each}
   {:else if loaded && noRowsMessage}
-    <Placeholder text={noRowsMessage} />
+    <div class="noRows"><i class="ri-list-check-2" />{noRowsMessage}</div>
   {/if}
 </div>
+
+<style>
+  .noRows {
+    color: var(--grey-6);
+    font-size: var(--font-size-s);
+    padding: var(--spacing-l);
+    display: grid;
+    place-items: center;
+  }
+  .noRows i {
+    margin-bottom: var(--spacing-m);
+    font-size: 1.5rem;
+    color: var(--grey-5);
+  }
+</style>