Revert skeleton loaders and restore required setting functionality (#9979)

packages/bbui/src/Skeleton/Skeleton.svelte

@@ -1,56 +0,0 @@
-<div class="skeleton">
-  <div class="children">
-    <slot />
-  </div>
-</div>
-
-<style>
-  .skeleton {
-    height: 100%;
-    width: 100%;
-    opacity: 0;
-    background-color: var(--spectrum-global-color-gray-200) !important;
-    border-radius: 7px;
-    overflow: hidden;
-    position: relative;
-    animation: fadeIn 130ms ease 0s 1 normal forwards;
-  }
-
-  .children {
-    pointer-events: none;
-    opacity: 0;
-  }
-
-  .skeleton::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: translateX(-100%);
-    background-image: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0) 0,
-      rgba(255, 255, 255, 0.15) 20%,
-      rgba(255, 255, 255, 0.3) 60%,
-      rgba(255, 255, 255, 0)
-    );
-    animation: shimmer 2s infinite;
-    content: "";
-  }
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 0.75;
-    }
-  }
-
-  @keyframes shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-</style>

packages/bbui/src/index.js

@@ -4,7 +4,6 @@ import "./bbui.css"
 import "@spectrum-css/icon/dist/index-vars.css"
 
 // Components
-export { default as Skeleton } from "./Skeleton/Skeleton.svelte"
 export { default as Input } from "./Form/Input.svelte"
 export { default as Stepper } from "./Form/Stepper.svelte"
 export { default as TextArea } from "./Form/TextArea.svelte"

packages/client/manifest.json

@@ -2346,7 +2346,6 @@
     ]
   },
   "stringfield": {
-    "skeleton": false,
     "name": "Text Field",
     "icon": "Text",
     "styles": ["size"],
@@ -2436,7 +2435,6 @@
     ]
   },
   "numberfield": {
-    "skeleton": false,
     "name": "Number Field",
     "icon": "123",
     "styles": ["size"],
@@ -2492,7 +2490,6 @@
     ]
   },
   "passwordfield": {
-    "skeleton": false,
     "name": "Password Field",
     "icon": "LockClosed",
     "styles": ["size"],
@@ -2548,7 +2545,6 @@
     ]
   },
   "optionsfield": {
-    "skeleton": false,
     "name": "Options Picker",
     "icon": "Menu",
     "styles": ["size"],
@@ -2715,7 +2711,6 @@
     ]
   },
   "multifieldselect": {
-    "skeleton": false,
     "name": "Multi-select Picker",
     "icon": "ViewList",
     "styles": ["size"],
@@ -2876,7 +2871,6 @@
     ]
   },
   "booleanfield": {
-    "skeleton": false,
     "name": "Checkbox",
     "icon": "SelectBox",
     "editable": true,
@@ -2955,7 +2949,6 @@
     ]
   },
   "longformfield": {
-    "skeleton": false,
     "name": "Long Form Field",
     "icon": "TextAlignLeft",
     "styles": ["size"],
@@ -3033,7 +3026,6 @@
     ]
   },
   "datetimefield": {
-    "skeleton": false,
     "name": "Date Picker",
     "icon": "Date",
     "styles": ["size"],
@@ -3113,7 +3105,6 @@
     ]
   },
   "codescanner": {
-    "skeleton": false,
     "name": "Barcode/QR Scanner",
     "icon": "Camera",
     "styles": ["size"],
@@ -3275,7 +3266,6 @@
     ]
   },
   "attachmentfield": {
-    "skeleton": false,
     "name": "Attachment",
     "icon": "Attach",
     "styles": ["size"],
@@ -3338,7 +3328,6 @@
     ]
   },
   "relationshipfield": {
-    "skeleton": false,
     "name": "Relationship Picker",
     "icon": "TaskList",
     "styles": ["size"],
@@ -3400,7 +3389,6 @@
     ]
   },
   "jsonfield": {
-    "skeleton": false,
     "name": "JSON Field",
     "icon": "Brackets",
     "styles": ["size"],
@@ -3591,7 +3579,6 @@
     }
   },
   "table": {
-    "skeleton": false,
     "name": "Table",
     "icon": "Table",
     "illegalChildren": ["section"],

packages/client/src/components/BlockComponent.svelte

@@ -24,7 +24,6 @@
   // to render this part of the block, taking advantage of binding enrichment
   $: id = `${block.id}-${context ?? rand}`
   $: instance = {
-    _blockElementHasChildren: $$slots?.default ?? false,
     _component: `@budibase/standard-components/${type}`,
     _id: id,
     _instanceName: name || type[0].toUpperCase() + type.slice(1),

packages/client/src/components/Component.svelte

@@ -29,7 +29,6 @@
   import Placeholder from "components/app/Placeholder.svelte"
   import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
   import ComponentPlaceholder from "components/app/ComponentPlaceholder.svelte"
-  import Skeleton from "components/app/Skeleton.svelte"
 
   export let instance = {}
   export let isLayout = false
@@ -39,7 +38,6 @@
 
   // Get parent contexts
   const context = getContext("context")
-  const loading = getContext("loading")
   const insideScreenslot = !!getContext("screenslot")
 
   // Create component context
@@ -172,15 +170,6 @@
   $: pad = pad || (interactive && hasChildren && inDndPath)
   $: $dndIsDragging, (pad = false)
 
-  // Determine whether we should render a skeleton loader for this component
-  $: showSkeleton =
-    $loading &&
-    definition?.name !== "Screenslot" &&
-    children.length === 0 &&
-    !instance._blockElementHasChildren &&
-    !definition?.block &&
-    definition?.skeleton !== false
-
   // Update component context
   $: store.set({
     id,
@@ -507,12 +496,7 @@
   })
 </script>
 
-{#if showSkeleton}
+{#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
-  <Skeleton
-    height={initialSettings?.height || definition?.size?.height || 0}
-    width={initialSettings?.width || definition?.size?.width || 0}
-  />
-{:else if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
   <!-- The ID is used as a class because getElementsByClassName is O(1) -->
   <!-- and the performance matters for the selection indicators -->
   <div
@@ -530,10 +514,11 @@
     data-icon={icon}
     data-parent={parent}
   >
-    <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
     {#if hasMissingRequiredSettings}
       <ComponentPlaceholder />
-      {:else if children.length}
+    {:else}
+      <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
+        {#if children.length}
           {#each children as child (child._id)}
             <svelte:self instance={child} parent={id} />
           {/each}
@@ -547,6 +532,7 @@
           <slot />
         {/if}
       </svelte:component>
+    {/if}
   </div>
 {/if}
 

packages/client/src/components/Router.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { writable } from "svelte/store"
   import { setContext, getContext, onMount } from "svelte"
   import Router, { querystring } from "svelte-spa-router"
   import { routeStore, stateStore } from "stores"
@@ -10,9 +9,6 @@
   const component = getContext("component")
   setContext("screenslot", true)
 
-  const loading = writable(false)
-  setContext("loading", loading)
-
   // Only wrap this as an array to take advantage of svelte keying,
   // to ensure the svelte-spa-router is fully remounted when route config
   // changes

packages/client/src/components/app/ComponentPlaceholder.svelte

@@ -3,12 +3,13 @@
   import { builderStore } from "stores"
 
   const component = getContext("component")
+  const { styleable } = getContext("sdk")
 
   $: requiredSetting = $component.missingRequiredSettings?.[0]
 </script>
 
 {#if $builderStore.inBuilder && requiredSetting}
-  <div class="component-placeholder">
+  <div class="component-placeholder" use:styleable={$component.styles}>
     <span>
       Add the <mark>{requiredSetting.label}</mark> setting to start using your component
       -
@@ -32,7 +33,7 @@
   }
   .component-placeholder mark {
     background-color: var(--spectrum-global-color-gray-400);
-    padding: 0 2px;
+    padding: 0 4px;
     border-radius: 2px;
   }
   .component-placeholder .spectrum-Link {

packages/client/src/components/app/DataProvider.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { writable } from "svelte/store"
+  import { getContext } from "svelte"
-  import { setContext, getContext } from "svelte"
+  import { Pagination, ProgressCircle } from "@budibase/bbui"
-  import { Pagination } from "@budibase/bbui"
   import { fetchData, LuceneUtils } from "@budibase/frontend-core"
 
   export let dataSource
@@ -14,11 +13,6 @@
   const { styleable, Provider, ActionTypes, API } = getContext("sdk")
   const component = getContext("component")
 
-  // Update loading state
-  const parentLoading = getContext("loading")
-  const loading = writable(true)
-  setContext("loading", loading)
-
   // We need to manage our lucene query manually as we want to allow components
   // to extend it
   let queryExtensions = {}
@@ -26,8 +20,8 @@
   $: query = extendQuery(defaultQuery, queryExtensions)
 
   // Fetch data and refresh when needed
-  $: fetch = createFetch(dataSource, $parentLoading)
+  $: fetch = createFetch(dataSource)
-  $: updateFetch({
+  $: fetch.update({
     query,
     sortColumn,
     sortOrder,
@@ -35,9 +29,6 @@
     paginate,
   })
 
-  // Keep loading context updated
-  $: loading.set($parentLoading || !$fetch.loaded)
-
   // Build our action context
   $: actions = [
     {
@@ -89,18 +80,7 @@
     limit,
   }
 
-  const createFetch = (datasource, parentLoading) => {
+  const createFetch = datasource => {
-    // Return a dummy fetch if parent is still loading. We do this so that we
-    // can still properly subscribe to a valid fetch object and check all
-    // properties, but we want to avoid fetching the real data until all parents
-    // have finished loading.
-    // This logic is only needed due to skeleton loaders, as previously we
-    // simply blocked component rendering until data was ready.
-    if (parentLoading) {
-      return fetchData({ API })
-    }
-
-    // Otherwise return the real thing
     return fetchData({
       API,
       datasource,
@@ -114,14 +94,6 @@
     })
   }
 
-  const updateFetch = opts => {
-    // Only update fetch if parents have stopped loading. Otherwise we will
-    // trigger a fetch of the real data before parents are ready.
-    if (!$parentLoading) {
-      fetch.update(opts)
-    }
-  }
-
   const addQueryExtension = (key, extension) => {
     if (!key || !extension) {
       return
@@ -155,6 +127,11 @@
 
 <div use:styleable={$component.styles} class="container">
   <Provider {actions} data={dataContext}>
+    {#if !$fetch.loaded}
+      <div class="loading">
+        <ProgressCircle />
+      </div>
+    {:else}
       <slot />
       {#if paginate && $fetch.supportsPagination}
         <div class="pagination">
@@ -167,6 +144,7 @@
           />
         </div>
       {/if}
+    {/if}
   </Provider>
 </div>
 
@@ -177,6 +155,13 @@
     justify-content: flex-start;
     align-items: stretch;
   }
+  .loading {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+  }
   .pagination {
     display: flex;
     flex-direction: row;

packages/client/src/components/app/Repeater.svelte

@@ -12,25 +12,22 @@
 
   const { Provider } = getContext("sdk")
   const component = getContext("component")
-  const loading = getContext("loading")
 
-  // If the parent DataProvider is loading, fill the rows array with a number of empty objects corresponding to the DataProvider's page size; this allows skeleton loader components to be rendered further down the tree.
+  $: rows = dataProvider?.rows ?? []
-  $: rows = $loading
+  $: loaded = dataProvider?.loaded ?? true
-    ? new Array(dataProvider.limit > 20 ? 20 : dataProvider.limit).fill({})
-    : dataProvider?.rows
 </script>
 
 <Container {direction} {hAlign} {vAlign} {gap} wrap>
   {#if $component.empty}
     <Placeholder />
-  {:else if !$loading && rows.length === 0}
+  {:else if rows.length > 0}
-    <div class="noRows"><i class="ri-list-check-2" />{noRowsMessage}</div>
-  {:else}
     {#each rows as row, index}
       <Provider data={{ ...row, index }}>
         <slot />
       </Provider>
     {/each}
+  {:else if loaded && noRowsMessage}
+    <div class="noRows"><i class="ri-list-check-2" />{noRowsMessage}</div>
   {/if}
 </Container>
 

packages/client/src/components/app/Skeleton.svelte

@@ -1,31 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { Skeleton } from "@budibase/bbui"
-
-  const { styleable } = getContext("sdk")
-  const component = getContext("component")
-
-  export let height
-  export let width
-
-  let styles
-
-  $: {
-    styles = JSON.parse(JSON.stringify($component.styles))
-
-    if (!styles.normal.height && height) {
-      // The height and width props provided to this component can either be numbers or strings set by users (ex. '100%', '100px', '100'). A string of '100' wouldn't be a valid CSS property, but some of our components respect that input, so we need to handle it here also, hence the `!isNaN` check.
-      styles.normal.height = !isNaN(height) ? `${height}px` : height
-    }
-
-    if (!styles.normal.width && width) {
-      styles.normal.width = !isNaN(width) ? `${width}px` : width
-    }
-  }
-</script>
-
-<div use:styleable={styles}>
-  <Skeleton>
-    <slot />
-  </Skeleton>
-</div>

packages/client/src/components/app/blocks/CardsBlock.svelte

@@ -37,6 +37,7 @@
   let repeaterId
   let schema
   let enrichedSearchColumns
+  let schemaLoaded = false
 
   $: fetchSchema(dataSource)
   $: enrichSearchColumns(searchColumns, schema).then(
@@ -77,10 +78,12 @@
         enrichRelationships: true,
       })
     }
+    schemaLoaded = true
   }
 </script>
 
-<Block>
+{#if schemaLoaded}
+  <Block>
     <BlockComponent
       type="form"
       bind:id={formId}
@@ -208,4 +211,5 @@
         </BlockComponent>
       </BlockComponent>
     </BlockComponent>
-</Block>
+  </Block>
+{/if}

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -37,6 +37,7 @@
   let schema
   let primaryDisplay
   let enrichedSearchColumns
+  let schemaLoaded = false
 
   $: fetchSchema(dataSource)
   $: enrichSearchColumns(searchColumns, schema).then(
@@ -91,6 +92,7 @@
         enrichRelationships: true,
       })
     }
+    schemaLoaded = true
   }
 
   const getNormalFields = schema => {
@@ -114,7 +116,8 @@
   }
 </script>
 
-<Block>
+{#if schemaLoaded}
+  <Block>
     <BlockComponent
       type="form"
       bind:id={formId}
@@ -270,4 +273,5 @@
         </BlockComponent>
       {/if}
     </BlockComponent>
-</Block>
+  </Block>
+{/if}

packages/client/src/components/app/forms/Field.svelte

@@ -1,7 +1,6 @@
 <script>
   import Placeholder from "../Placeholder.svelte"
   import FieldGroupFallback from "./FieldGroupFallback.svelte"
-  import Skeleton from "../Skeleton.svelte"
   import { getContext, onDestroy } from "svelte"
 
   export let label
@@ -54,8 +53,6 @@
     builderStore.actions.updateProp("label", e.target.textContent)
   }
 
-  const loading = getContext("loading")
-
   onDestroy(() => {
     fieldApi?.deregister()
     unsubscribe?.()
@@ -79,10 +76,6 @@
     <div class="spectrum-Form-itemField">
       {#if !formContext}
         <Placeholder text="Form components need to be wrapped in a form" />
-      {:else if $loading}
-        <Skeleton>
-          <slot />
-        </Skeleton>
       {:else if !fieldState}
         <Placeholder />
       {:else if schemaType && schemaType !== type && !["options", "longform"].includes(type)}

packages/client/src/components/app/forms/Form.svelte

@@ -1,8 +1,7 @@
 <script>
-  import { getContext, setContext } from "svelte"
+  import { getContext } from "svelte"
   import InnerForm from "./InnerForm.svelte"
   import { Helpers } from "@budibase/bbui"
-  import { writable } from "svelte/store"
 
   export let dataSource
   export let theme
@@ -21,11 +20,6 @@
   const context = getContext("context")
   const { API, fetchDatasourceSchema } = getContext("sdk")
 
-  // Forms also use loading context as they require loading a schema
-  const parentLoading = getContext("loading")
-  const loading = writable(true)
-  setContext("loading", loading)
-
   let loaded = false
   let schema
   let table
@@ -36,7 +30,6 @@
   $: resetKey = Helpers.hashString(
     schemaKey + JSON.stringify(initialValues) + disabled
   )
-  $: loading.set($parentLoading || !loaded)
 
   // Returns the closes data context which isn't a built in context
   const getInitialValues = (type, dataSource, context) => {
@@ -86,7 +79,8 @@
   }
 </script>
 
-{#key resetKey}
+{#if loaded}
+  {#key resetKey}
     <InnerForm
       {dataSource}
       {theme}
@@ -101,4 +95,5 @@
     >
       <slot />
     </InnerForm>
-{/key}
+  {/key}
+{/if}

packages/client/src/components/app/table/Table.svelte

@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import { Table, Skeleton } from "@budibase/bbui"
+  import { Table } from "@budibase/bbui"
   import SlotRenderer from "./SlotRenderer.svelte"
   import { UnsortableTypes } from "../../../constants"
   import { onDestroy } from "svelte"
@@ -14,7 +14,6 @@
   export let compact
   export let onClick
 
-  const loading = getContext("loading")
   const component = getContext("component")
   const { styleable, getAction, ActionTypes, rowSelectionStore } =
     getContext("sdk")
@@ -29,6 +28,7 @@
   let selectedRows = []
 
   $: hasChildren = $component.children
+  $: loading = dataProvider?.loading ?? false
   $: data = dataProvider?.rows || []
   $: fullSchema = dataProvider?.schema ?? {}
   $: fields = getFields(fullSchema, columns, false)
@@ -130,7 +130,7 @@
   <Table
     {data}
     {schema}
-    loading={$loading}
+    {loading}
     {rowCount}
     {quiet}
     {compact}
@@ -145,9 +145,6 @@
     on:sort={onSort}
     on:click={handleClick}
   >
-    <div class="skeleton" slot="loadingIndicator">
-      <Skeleton />
-    </div>
     <slot />
   </Table>
   {#if allowSelectRows && selectedRows.length}
@@ -161,12 +158,6 @@
   div {
     background-color: var(--spectrum-alias-background-color-secondary);
   }
-
-  .skeleton {
-    height: 100%;
-    width: 100%;
-  }
-
   .row-count {
     margin-top: var(--spacing-l);
   }