diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte
index 1a8df189af..d5a5f064b6 100644
--- a/packages/client/src/components/app/blocks/CardsBlock.svelte
+++ b/packages/client/src/components/app/blocks/CardsBlock.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount, getContext } from "svelte"
+  import { getContext } from "svelte"
   import Block from "components/Block.svelte"
   import BlockComponent from "components/BlockComponent.svelte"
   import { Heading } from "@budibase/bbui"
@@ -46,6 +46,7 @@
   let repeaterId
   let schema
 
+  $: fetchSchema(dataSource)
   $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
   $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
   $: cardWidth = cardHorizontal ? 420 : 300
@@ -107,12 +108,12 @@
     return `${split[0]}/{{ ${safe(repeaterId)}.${safe(col)} }}`
   }
 
-  // Load the datasource schema on mount so we can determine column types
-  onMount(async () => {
+  // Load the datasource schema so we can determine column types
+  const fetchSchema = async dataSource => {
     if (dataSource) {
       schema = await API.fetchDatasourceSchema(dataSource)
     }
-  })
+  }
 </script>
 
 <Block>
diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index 255cbf44cf..55937d1b7f 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/packages/client/src/components/app/blocks/TableBlock.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount, getContext } from "svelte"
+  import { getContext } from "svelte"
   import Block from "components/Block.svelte"
   import BlockComponent from "components/BlockComponent.svelte"
   import { Heading } from "@budibase/bbui"
@@ -41,6 +41,7 @@
   let dataProviderId
   let schema
 
+  $: fetchSchema(dataSource)
   $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
   $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
   $: titleButtonAction = [
@@ -85,12 +86,12 @@
     return enrichedColumns.slice(0, 3)
   }
 
-  // Load the datasource schema on mount so we can determine column types
-  onMount(async () => {
+  // Load the datasource schema so we can determine column types
+  const fetchSchema = async dataSource => {
     if (dataSource) {
       schema = await API.fetchDatasourceSchema(dataSource)
     }
-  })
+  }
 </script>
 
 <Block>
diff --git a/packages/client/src/components/app/forms/Form.svelte b/packages/client/src/components/app/forms/Form.svelte
index f96f77f1d3..1c6083aa5c 100644
--- a/packages/client/src/components/app/forms/Form.svelte
+++ b/packages/client/src/components/app/forms/Form.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getContext, onMount } from "svelte"
+  import { getContext } from "svelte"
   import InnerForm from "./InnerForm.svelte"
   import { hashString } from "utils/helpers"