From 1eaff233d66250619b6c5bbff0fe3e8d16c3f6e8 Mon Sep 17 00:00:00 2001
From: Stephan Richter <s.richter@srsoftware.de>
Date: Fri, 20 Mar 2026 09:13:41 +0100
Subject: [PATCH] found a solution to lazy-load the spreadsheet js and css

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
---
 frontend/src/routes/calc.svelte | 40 ++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/frontend/src/routes/calc.svelte b/frontend/src/routes/calc.svelte
index 9bd33bc4..737133d8 100644
--- a/frontend/src/routes/calc.svelte
+++ b/frontend/src/routes/calc.svelte
@@ -1,16 +1,8 @@
 <script>
 	import { onMount } from 'svelte';
-	import jspreadsheet from "jspreadsheet-ce";
-    import "jspreadsheet-ce/dist/jspreadsheet.css";
 
 	var spreadsheet = null;
 
-	function update(instance, cell, x, y, value) {
-		console.log({instance,cell,x,y,value});
-		console.log(spreadsheet[0].getData());
-	}
-
-
 	const config = {
 	    worksheets: [{
 	            data: [
@@ -30,11 +22,37 @@
 	    onchange: update
 	};
 
-	function load(){
-		spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), config);
+
+	function update(instance, cell, x, y, value) {
+		console.log({instance,cell,x,y,value});
+		console.log(spreadsheet[0].getData());
 	}
 
+	let loading = true;
+
+	async function load(){
+	    try {
+			const module = await import('jspreadsheet-ce'); // path or package name
+		    await import('jspreadsheet-ce/dist/jspreadsheet.css');
+
+			let jspreadsheet = module.default ?? module;
+			let element = document.getElementById('spreadsheet');
+			console.log(element);
+			spreadsheet = jspreadsheet(element, config);
+	    } catch (e) {
+			console.log(e);
+	    } finally {
+			loading = false;
+	    }
+	}
+
+
 	onMount(load);
 </script>
 
-<div id="spreadsheet"></div>
\ No newline at end of file
+{#if loading}
+Loading…
+{:else}
+
+{/if}
+<div id="spreadsheet">Spreadsheet loading…</div>
\ No newline at end of file