From 3a8e217bb752b4763791a681a90bd1be93bda712 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 17 Dec 2021 09:18:43 +0000
Subject: [PATCH] Delay rendering blocks until the schema has been attempted to
 be loaded

---
 .../components/app/blocks/CardsBlock.svelte   | 164 +++++++++---------
 .../components/app/blocks/TableBlock.svelte   |  88 +++++-----
 2 files changed, 128 insertions(+), 124 deletions(-)

diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte
index 49c4ef5b8b..349dbf9074 100644
--- a/packages/client/src/components/app/blocks/CardsBlock.svelte
+++ b/packages/client/src/components/app/blocks/CardsBlock.svelte
@@ -45,6 +45,7 @@
   let dataProviderId
   let repeaterId
   let schema
+  let schemaLoaded = false
 
   $: fetchSchema(dataSource)
   $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
@@ -113,101 +114,104 @@
     if (dataSource) {
       schema = await fetchDatasourceSchema(dataSource)
     }
+    schemaLoaded = true
   }
 </script>
 
-<Block>
-  <div class="card-list" use:styleable={$component.styles}>
-    <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
-      {#if title || enrichedSearchColumns?.length || showTitleButton}
-        <div class="header" class:mobile={$context.device.mobile}>
-          <div class="title">
-            <Heading>{title || ""}</Heading>
+{#if schemaLoaded}
+  <Block>
+    <div class="card-list" use:styleable={$component.styles}>
+      <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
+        {#if title || enrichedSearchColumns?.length || showTitleButton}
+          <div class="header" class:mobile={$context.device.mobile}>
+            <div class="title">
+              <Heading>{title || ""}</Heading>
+            </div>
+            <div class="controls">
+              {#if enrichedSearchColumns?.length}
+                <div
+                  class="search"
+                  style="--cols:{enrichedSearchColumns?.length}"
+                >
+                  {#each enrichedSearchColumns as column}
+                    <BlockComponent
+                      type={column.componentType}
+                      props={{
+                        field: column.name,
+                        placeholder: column.name,
+                        text: column.name,
+                        autoWidth: true,
+                      }}
+                    />
+                  {/each}
+                </div>
+              {/if}
+              {#if showTitleButton}
+                <BlockComponent
+                  type="button"
+                  props={{
+                    onClick: titleButtonAction,
+                    text: titleButtonText,
+                    type: "cta",
+                  }}
+                />
+              {/if}
+            </div>
           </div>
-          <div class="controls">
-            {#if enrichedSearchColumns?.length}
-              <div
-                class="search"
-                style="--cols:{enrichedSearchColumns?.length}"
-              >
-                {#each enrichedSearchColumns as column}
-                  <BlockComponent
-                    type={column.componentType}
-                    props={{
-                      field: column.name,
-                      placeholder: column.name,
-                      text: column.name,
-                      autoWidth: true,
-                    }}
-                  />
-                {/each}
-              </div>
-            {/if}
-            {#if showTitleButton}
-              <BlockComponent
-                type="button"
-                props={{
-                  onClick: titleButtonAction,
-                  text: titleButtonText,
-                  type: "cta",
-                }}
-              />
-            {/if}
-          </div>
-        </div>
-      {/if}
-      <BlockComponent
-        type="dataprovider"
-        bind:id={dataProviderId}
-        props={{
-          dataSource,
-          filter: enrichedFilter,
-          sortColumn,
-          sortOrder,
-          paginate,
-          limit,
-        }}
-      >
+        {/if}
         <BlockComponent
-          type="repeater"
-          bind:id={repeaterId}
-          context="repeater"
+          type="dataprovider"
+          bind:id={dataProviderId}
           props={{
-            dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
-            direction: "row",
-            hAlign: "stretch",
-            vAlign: "top",
-            gap: "M",
-            noRowsMessage: "No rows found",
-          }}
-          styles={{
-            display: "grid",
-            "grid-template-columns": `repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr))`,
+            dataSource,
+            filter: enrichedFilter,
+            sortColumn,
+            sortOrder,
+            paginate,
+            limit,
           }}
         >
           <BlockComponent
-            type="spectrumcard"
+            type="repeater"
+            bind:id={repeaterId}
+            context="repeater"
             props={{
-              title: cardTitle,
-              subtitle: cardSubtitle,
-              description: cardDescription,
-              imageURL: cardImageURL,
-              horizontal: cardHorizontal,
-              showButton: showCardButton,
-              buttonText: cardButtonText,
-              buttonOnClick: cardButtonOnClick,
-              linkURL: fullCardURL,
-              linkPeek: cardPeek,
+              dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
+              direction: "row",
+              hAlign: "stretch",
+              vAlign: "top",
+              gap: "M",
+              noRowsMessage: "No rows found",
             }}
             styles={{
-              width: "auto",
+              display: "grid",
+              "grid-template-columns": `repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr))`,
             }}
-          />
+          >
+            <BlockComponent
+              type="spectrumcard"
+              props={{
+                title: cardTitle,
+                subtitle: cardSubtitle,
+                description: cardDescription,
+                imageURL: cardImageURL,
+                horizontal: cardHorizontal,
+                showButton: showCardButton,
+                buttonText: cardButtonText,
+                buttonOnClick: cardButtonOnClick,
+                linkURL: fullCardURL,
+                linkPeek: cardPeek,
+              }}
+              styles={{
+                width: "auto",
+              }}
+            />
+          </BlockComponent>
         </BlockComponent>
       </BlockComponent>
-    </BlockComponent>
-  </div>
-</Block>
+    </div>
+  </Block>
+{/if}
 
 <style>
   .header {
diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index df99dee65c..f04885bf2a 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/packages/client/src/components/app/blocks/TableBlock.svelte
@@ -96,47 +96,47 @@
   }
 </script>
 
-<Block>
-  <div class={size} use:styleable={$component.styles}>
-    <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
-      {#if title || enrichedSearchColumns?.length || showTitleButton}
-        <div class="header" class:mobile={$context.device.mobile}>
-          <div class="title">
-            <Heading>{title || ""}</Heading>
+{#if schemaLoaded}
+  <Block>
+    <div class={size} use:styleable={$component.styles}>
+      <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
+        {#if title || enrichedSearchColumns?.length || showTitleButton}
+          <div class="header" class:mobile={$context.device.mobile}>
+            <div class="title">
+              <Heading>{title || ""}</Heading>
+            </div>
+            <div class="controls">
+              {#if enrichedSearchColumns?.length}
+                <div
+                  class="search"
+                  style="--cols:{enrichedSearchColumns?.length}"
+                >
+                  {#each enrichedSearchColumns as column}
+                    <BlockComponent
+                      type={column.componentType}
+                      props={{
+                        field: column.name,
+                        placeholder: column.name,
+                        text: column.name,
+                        autoWidth: true,
+                      }}
+                    />
+                  {/each}
+                </div>
+              {/if}
+              {#if showTitleButton}
+                <BlockComponent
+                  type="button"
+                  props={{
+                    onClick: titleButtonAction,
+                    text: titleButtonText,
+                    type: "cta",
+                  }}
+                />
+              {/if}
+            </div>
           </div>
-          <div class="controls">
-            {#if enrichedSearchColumns?.length}
-              <div
-                class="search"
-                style="--cols:{enrichedSearchColumns?.length}"
-              >
-                {#each enrichedSearchColumns as column}
-                  <BlockComponent
-                    type={column.componentType}
-                    props={{
-                      field: column.name,
-                      placeholder: column.name,
-                      text: column.name,
-                      autoWidth: true,
-                    }}
-                  />
-                {/each}
-              </div>
-            {/if}
-            {#if showTitleButton}
-              <BlockComponent
-                type="button"
-                props={{
-                  onClick: titleButtonAction,
-                  text: titleButtonText,
-                  type: "cta",
-                }}
-              />
-            {/if}
-          </div>
-        </div>
-      {/if}
-      {#if schema}
+        {/if}
         <BlockComponent
           type="dataprovider"
           bind:id={dataProviderId}
@@ -165,10 +165,10 @@
             }}
           />
         </BlockComponent>
-      {/if}
-    </BlockComponent>
-  </div>
-</Block>
+      </BlockComponent>
+    </div>
+  </Block>
+{/if}
 
 <style>
   .header {