Don't show skeleton on SSR!

Dockerfile

@@ -48,6 +48,7 @@ RUN apt-get update -qq && \
 # Install npm dependencies for Vite. Vendored Inertia packages must exist
 # before `bun i` because they are referenced via local file dependencies.
 COPY package.json bun.lock ./
+COPY patches patches
 COPY vendor/inertia vendor/inertia
 RUN bun i
 

Dockerfile.dev

@@ -28,6 +28,7 @@ WORKDIR /app
 # Install npm dependencies for Vite. Vendored Inertia packages must exist
 # before `bun install` because they are referenced via local file dependencies.
 COPY package.json bun.lock ./
+COPY patches patches
 COPY vendor/inertia vendor/inertia
 RUN bun install
 

app/javascript/pages/Home/SignedIn.svelte

@@ -133,6 +133,36 @@
     <GitHubLinkBanner {github_auth_path} />
   {/if}
 
+  {#snippet dashboardContent(reloading: boolean)}
+    <div class="flex flex-col gap-8" class:opacity-60={reloading}>
+      <div>
+        {#if dashboard_stats?.today_stats}
+          <TodaySentence
+            show_logged_time_sentence={dashboard_stats.today_stats
+              .show_logged_time_sentence}
+            todays_duration_display={dashboard_stats.today_stats
+              .todays_duration_display}
+            todays_languages={dashboard_stats.today_stats.todays_languages}
+            todays_editors={dashboard_stats.today_stats.todays_editors}
+          />
+        {/if}
+      </div>
+
+      {#if dashboard_stats?.filterable_dashboard_data}
+        <Dashboard
+          data={dashboard_stats.filterable_dashboard_data}
+          programmingGoalsProgress={dashboard_stats?.programming_goals_progress ||
+            []}
+          onFiltersChange={refreshDashboardData}
+        />
+      {/if}
+
+      {#if dashboard_stats?.activity_graph}
+        <ActivityGraph data={dashboard_stats.activity_graph} />
+      {/if}
+    </div>
+  {/snippet}
+
   <Deferred data="dashboard_stats">
     {#snippet fallback()}
       <div class="flex flex-col gap-8">
@@ -145,36 +175,7 @@
     {/snippet}
 
     {#snippet children({ reloading })}
-      <div class="flex flex-col gap-8" class:opacity-60={reloading}>
-        <!-- Today Stats -->
-        <div>
-          {#if dashboard_stats?.today_stats}
-            <TodaySentence
-              show_logged_time_sentence={dashboard_stats.today_stats
-                .show_logged_time_sentence}
-              todays_duration_display={dashboard_stats.today_stats
-                .todays_duration_display}
-              todays_languages={dashboard_stats.today_stats.todays_languages}
-              todays_editors={dashboard_stats.today_stats.todays_editors}
-            />
-          {/if}
-        </div>
-
-        <!-- Main Dashboard -->
-        {#if dashboard_stats?.filterable_dashboard_data}
-          <Dashboard
-            data={dashboard_stats.filterable_dashboard_data}
-            programmingGoalsProgress={dashboard_stats.programming_goals_progress ||
-              []}
-            onFiltersChange={refreshDashboardData}
-          />
-        {/if}
-
-        <!-- Activity Graph -->
-        {#if dashboard_stats?.activity_graph}
-          <ActivityGraph data={dashboard_stats.activity_graph} />
-        {/if}
-      </div>
+      {@render dashboardContent(reloading)}
     {/snippet}
   </Deferred>
 </div>

app/javascript/pages/Home/signedIn/PieChart.svelte

@@ -69,6 +69,9 @@
 
   const formatDuration = (value: number | null | undefined) =>
     secondsToDisplay(value ?? 0);
+
+  const CHART_WIDTH = 480;
+  const CHART_HEIGHT = 300;
 </script>
 
 <div
@@ -79,12 +82,20 @@
     {#if data.length > 0}
       <PieChart
         {data}
+        ssr={true}
+        width={CHART_WIDTH}
+        height={CHART_HEIGHT}
         key="name"
         value="value"
         cRange={colors}
         legend={true}
         padding={{ bottom: legendPadding }}
         props={{
+          svg: {
+            class: "h-full w-full",
+            viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`,
+            preserveAspectRatio: "xMidYMid meet",
+          },
           legend: { classes: legendClasses },
           tooltip: { item: { format: formatDuration } },
         }}

package.json

@@ -32,5 +32,8 @@
   "devDependencies": {
     "prettier": "^3.8.2",
     "prettier-plugin-svelte": "^3.5.1"
+  },
+  "patchedDependencies": {
+    "layercake@8.4.3": "patches/layercake@8.4.3.patch"
   }
 }

patches/layercake@8.4.3.patch

@@ -0,0 +1,57 @@
+diff --git a/dist/LayerCake.svelte b/dist/LayerCake.svelte
+index a7b2dfbfb3541b07ae1298935a53854b9615631e..830a5a8de9054d1d4cfa628ce39cad3c2853f955 100644
+--- a/dist/LayerCake.svelte
++++ b/dist/LayerCake.svelte
+@@ -35,10 +35,15 @@
+ 	/** @type {Number} [height=containerHeight] Override the automated height. */
+ 	export let height = undefined;
+
+-	/** @type {Number} [containerWidth=100] The bound container width. */
+-	export let containerWidth = width || 100;
+-	/** @type {Number} [containerHeight=100] The bound container height. */
+-	export let containerHeight = height || 100;
++	/** @type {Number|undefined} [containerWidth] The bound container width. */
++	export let containerWidth = undefined;
++	/** @type {Number|undefined} [containerHeight] The bound container height. */
++	export let containerHeight = undefined;
++
++	let measuredContainerWidth = width || containerWidth || 100;
++	let measuredContainerHeight = height || containerHeight || 100;
++	$: resolvedContainerWidth = width ?? containerWidth ?? measuredContainerWidth;
++	$: resolvedContainerHeight = height ?? containerHeight ?? measuredContainerHeight;
+
+ 	/**	@type {Element|undefined} [element] The .layercake-container `<div>` tag. Useful for bindings. */
+ 	export let element = undefined;
+@@ -179,8 +184,8 @@
+ 	 * Prefix these with `_` to keep things organized
+ 	 */
+ 	const _percentRange = writable(percentRange);
+-	const _containerWidth = writable(containerWidth);
+-	const _containerHeight = writable(containerHeight);
++	const _containerWidth = writable(resolvedContainerWidth);
++	const _containerHeight = writable(resolvedContainerHeight);
+ 	const _extents = writable(filterObject(extents));
+ 	const _data = writable(data);
+ 	const _flatData = writable(flatData || data);
+@@ -221,8 +226,8 @@
+ 	const _custom = writable(custom);
+
+ 	$: $_percentRange = percentRange;
+-	$: $_containerWidth = containerWidth;
+-	$: $_containerHeight = containerHeight;
++	$: $_containerWidth = resolvedContainerWidth;
++	$: $_containerHeight = resolvedContainerHeight;
+ 	$: $_extents = filterObject(extents);
+ 	$: $_data = data;
+ 	$: $_flatData = flatData || data;
+@@ -540,8 +545,8 @@
+ 		style:bottom={position === 'absolute' ? '0' : null}
+ 		style:left={position === 'absolute' ? '0' : null}
+ 		style:pointer-events={pointerEvents === false ? 'none' : null}
+-		bind:clientWidth={containerWidth}
+-		bind:clientHeight={containerHeight}
++		bind:clientWidth={measuredContainerWidth}
++		bind:clientHeight={measuredContainerHeight}
+ 	>
+ 		<slot
+ 			{element}

vendor/inertia/packages/svelte/dist/components/App.svelte

@@ -35,6 +35,10 @@
   let page = $state({ ...initialPage, flash: initialPage.flash ?? {} })
   let renderProps = $derived.by<RenderProps>(() => resolveRenderProps(component, page, key))
 
+  // Populate the global page store before the initial render so SSR can
+  // resolve Deferred/WhenVisible content against the actual page props.
+  setPage(page)
+
   // Reactively update the global page state when local page state changes
   $effect.pre(() => {
     setPage(page)