Merge pull request #1316 from evidence-dev/chart-ssr-loading-state

POC of an SSR Loading Skeleton for Charts

packages/core-components/src/lib/unsorted/ui/ChartLoading.svelte

@@ -0,0 +1,17 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	import { fade } from 'svelte/transition';
+
+	export let height = '231px';
+</script>
+
+<div role="status" class="animate-pulse" in:fade|local>
+	<span class="sr-only">Loading...</span>
+	<div
+		class="bg-gray-200 rounded-md dark:bg-gray-400 max-w-[100%]"
+		style="height:{height}; margin-top: 15px; margin-bottom: 31px;"
+	/>
+</div>

packages/core-components/src/lib/unsorted/viz/Chart.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <script>
+	import { browser } from '$app/environment';
 	import { writable } from 'svelte/store';
 	import { setContext } from 'svelte';
 	import { propKey, configKey, strictBuild } from './context';
@@ -13,6 +14,7 @@
 	$: setContext(configKey, config);
 
 	import ECharts from './ECharts.svelte';
+	import ChartLoading from '../ui/ChartLoading.svelte';
 	import getColumnSummary from '@evidence-dev/component-utilities/getColumnSummary';
 	import getDistinctValues from '@evidence-dev/component-utilities/getDistinctValues';
 	import getDistinctCount from '@evidence-dev/component-utilities/getDistinctCount';
@@ -1003,8 +1005,13 @@
 </script>
 
 {#if !error}
-	<slot />
-	<ECharts config={$config} {height} {width} {data} {showAllXAxisLabels} {swapXY} />
+	{#if !browser}
+		<slot />
+		<ChartLoading {height} />
+	{:else}
+		<slot />
+		<ECharts config={$config} {height} {width} {data} {showAllXAxisLabels} {swapXY} />
+	{/if}
 {:else}
 	<ErrorChart {error} {chartType} />
 {/if}