Separate chart loading state from error state

packages/standard-components/src/Chart/ApexChart.svelte

@@ -6,7 +6,7 @@
 
 {#if options}
   <div use:chart={options} />
-{:else}
+{:else if options === false}
   <div>Invalid chart options</div>
 {/if}
 

packages/standard-components/src/Chart/BarChart.svelte

@@ -26,6 +26,7 @@
   // Fetch data on mount
   onMount(async () => {
     if (!datasource || !labelColumn || !valueColumns || !valueColumns.length) {
+      options = false
       return
     }
 
@@ -39,6 +40,7 @@
       .slice(0, 20)
       .sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
     if (!schema || !data.length) {
+      options = false
       return
     }
 

packages/standard-components/src/Chart/CandleStickChart.svelte

@@ -26,6 +26,7 @@
   onMount(async () => {
     const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
     if (!datasource || allCols.find(x => x == null)) {
+      options = false
       return
     }
 
@@ -39,6 +40,7 @@
       .slice(0, 100)
       .sort((a, b) => (a[dateColumn] > b[dateColumn] ? 1 : -1))
     if (!schema || !data.length) {
+      options = false
       return
     }
 

packages/standard-components/src/Chart/LineChart.svelte

@@ -32,6 +32,7 @@
   // Fetch data on mount
   onMount(async () => {
     if (!datasource || !labelColumn || !valueColumns || !valueColumns.length) {
+      options = false
       return
     }
 
@@ -45,6 +46,7 @@
       .slice(0, 100)
       .sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
     if (!schema || !data.length) {
+      options = false
       return
     }
 

packages/standard-components/src/Chart/PieChart.svelte

@@ -23,6 +23,7 @@
   // Fetch data on mount
   onMount(async () => {
     if (!datasource || !labelColumn || !valueColumn) {
+      options = false
       return
     }
 
@@ -34,6 +35,7 @@
       .slice(0, 20)
       .sort((a, b) => (a[labelColumn] > b[labelColumn] ? 1 : -1))
     if (!schema || !data.length) {
+      options = false
       return
     }