diff --git a/examples/cards-with-remote-content/lazy.sql b/examples/cards-with-remote-content/lazy.sql
new file mode 100644
index 00000000..0feaa7e4
--- /dev/null
+++ b/examples/cards-with-remote-content/lazy.sql
@@ -0,0 +1,10 @@
+select 'lazy' as component;
+
+select 
+    '/chart-example.sql?_sqlpage_embed' as embed,
+    'card my-2' as class,
+    'height:340px' as style;
+
+select '/map-example.sql' as embed;
+
+select '/table-example.sql?_sqlpage_embed' as embed;
diff --git a/sqlpage/sqlpage.js b/sqlpage/sqlpage.js
index caa2d71f..2af69507 100644
--- a/sqlpage/sqlpage.js
+++ b/sqlpage/sqlpage.js
@@ -3,24 +3,29 @@
 
 const nonce = document.currentScript.nonce;
 
-function sqlpage_card() {
-    for (const c of document.querySelectorAll("[data-pre-init=card]")) {
-        const source = c.dataset.embed;
-        fetch(c.dataset.embed)
-            .then(res => res.text())
-            .then(html => {
-                const body = c.querySelector(".card-content");
-                body.innerHTML = html;
-                c.removeAttribute("data-pre-init");
-                const spinner = c.querySelector(".card-loading-placeholder");
-                if (spinner) {
-                    spinner.parentNode.removeChild(spinner);
-                }
-                const fragLoadedEvt = new CustomEvent("fragment-loaded", {
-                    bubbles: true
-                });
-                c.dispatchEvent(fragLoadedEvt);
-            })
+function sqlpage_embed() {
+  for (const c of document.querySelectorAll("[data-embed]:not([aria-busy=true])")) {
+    c.ariaBusy = true;
+    let url;
+    try {
+      url = new URL(c.dataset.embed, window.location.href)
+    } catch {
+      console.error(`'${c.dataset.embed}' is not a valid url`)
+      continue;
+    }
+    url.searchParams.set("_sqlpage_embed", "");
+
+    fetch(url)
+      .then(res => res.text())
+      .then(html => {
+        c.innerHTML = html;
+        c.ariaBusy = false;
+        delete c.dataset.embed;
+        c.dispatchEvent(new CustomEvent("fragment-loaded", {
+          bubbles: true
+      }));
+    })
+    .catch(err => console.error("Fetch error: ", err));
     }
 }
 
@@ -176,9 +181,14 @@ function sqlpage_form() {
     }
 }
 
-function get_tabler_color(name) {
-    return getComputedStyle(document.documentElement).getPropertyValue('--tblr-' + name);
+function create_tabler_color() {
+    const style = getComputedStyle(document.documentElement);
+  return function get_tabler_color(name) {
+    return style.getPropertyValue('--tblr-' + name);
 }
+}
+
+const get_tabler_color = create_tabler_color();
 
 function load_scripts() {
   let addjs = document.querySelectorAll("[data-sqlpage-js]");
@@ -198,6 +208,6 @@ function add_init_fn(f) {
 
 add_init_fn(sqlpage_table);
 add_init_fn(sqlpage_map);
-add_init_fn(sqlpage_card);
+add_init_fn(sqlpage_embed);
 add_init_fn(sqlpage_form);
-add_init_fn(load_scripts);
\ No newline at end of file
+add_init_fn(load_scripts);
diff --git a/sqlpage/templates/card.handlebars b/sqlpage/templates/card.handlebars
index 2e42431c..236e80c5 100644
--- a/sqlpage/templates/card.handlebars
+++ b/sqlpage/templates/card.handlebars
@@ -26,8 +26,7 @@
             <div class="card h-100
                 {{~#if active}} card-active{{/if~}}
                 {{~#if background_color}} bg-{{background_color}} text-{{background_color}}-fg{{/if~}}
-                "
-                {{#if (and embed (ne embed_mode "iframe"))}}data-pre-init="card" data-embed="{{embed}}"{{/if}}>
+                ">
                 {{#if link}}
                     <a href="{{link}}" style="text-decoration: inherit; color: inherit">
                 {{/if}}
@@ -39,13 +38,19 @@
                 {{/if}}
                 <div class="card-body">
                     {{#if title}}<h2 class="card-title fs-3 me-3">{{title}}</h2>{{/if}}
-                    <div class="card-content remove-bottom-margin{{#if (and icon (not title))}} pe-4{{/if}}">
+                    <div class="card-content remove-bottom-margin{{#if (and icon (not title))}} pe-4{{/if}}"
+                        {{#if (and embed (ne embed_mode "iframe"))}} data-embed="{{embed}}"{{/if}}
+                    >
                         {{~description~}}
                         {{~#if description_md~}}
                             {{{markdown description_md}}}
                         {{~/if~}}
+                        {{#if (and embed (ne embed_mode "iframe"))}}
+                            <div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
+                                <span class="visually-hidden">Loading...</span>
+                            </div>
+                        {{~/if~}}
                     </div>
-                    {{~#if embed ~}}
                     {{~#if (eq embed_mode "iframe")}}
                         <iframe src="{{embed}}" 
                             width="{{#if width}}{{width}}{{else}}100%{{/if}}"
@@ -55,11 +60,6 @@
                             {{~#if style}} style="{{style}}"{{/if~}}
                         >
                         </iframe>
-                    {{~else~}}
-                        <div class="spinner-border card-loading-placeholder" role="status" style="width: 3rem; height: 3rem;">
-                            <span class="visually-hidden">Loading...</span>
-                        </div>
-                    {{~/if~}}
                     {{~/if~}}
                 </div>
                 {{#if link}}
@@ -67,11 +67,11 @@
                 {{/if}}
                 {{#if footer}}
                     <div class="card-footer text-muted py-2">
-                    {{#if footer_link}}
+                        {{#if footer_link}}
                             <a href="{{footer_link}}">{{footer}}</a>
-                    {{else}}
+                        {{else}}
                             {{footer}}
-                    {{/if}}
+                        {{/if}}
                     </div>
                 {{/if}}
                 {{#if footer_md}}
diff --git a/sqlpage/templates/lazy.handlebars b/sqlpage/templates/lazy.handlebars
new file mode 100644
index 00000000..b853b5ea
--- /dev/null
+++ b/sqlpage/templates/lazy.handlebars
@@ -0,0 +1,13 @@
+<div class="{{default class "my-2"}}"{{~#if style}} style="{{style}}" {{/if~}}>
+    {{#each_row}}
+        <div data-embed="{{embed}}">
+            <div class="{{default class "card my-2"}}" {{~#if style}} style="{{style}}" {{/if~}}>
+                <div class="h-full w-full p-2 d-flex align-items-center justify-content-center">
+                    <div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {{/each_row}}
+</div>
\ No newline at end of file