From 397050b39ce5607370db34c109ebb2c0ed624b37 Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <Daniel.Sheffield@first-watch.co.nz>
Date: Mon, 24 Jun 2024 09:34:23 +1200
Subject: [PATCH 01/15] #435: WIP - show spinner indicating page is loading

---
 examples/show-progress/README.md              |  3 +
 examples/show-progress/index.sql              | 17 +++++
 examples/show-progress/sqlpage/sqlpage.yml    |  3 +
 sqlpage/sqlpage.css                           | 65 ++++++++++++++++++-
 sqlpage/templates/spinner-progress.handlebars |  7 ++
 sqlpage/templates/spinner-start.handlebars    |  2 +
 sqlpage/templates/spinner-stop.handlebars     |  2 +
 7 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 examples/show-progress/README.md
 create mode 100644 examples/show-progress/index.sql
 create mode 100644 examples/show-progress/sqlpage/sqlpage.yml
 create mode 100644 sqlpage/templates/spinner-progress.handlebars
 create mode 100644 sqlpage/templates/spinner-start.handlebars
 create mode 100644 sqlpage/templates/spinner-stop.handlebars

diff --git a/examples/show-progress/README.md b/examples/show-progress/README.md
new file mode 100644
index 00000000..fb4c7348
--- /dev/null
+++ b/examples/show-progress/README.md
@@ -0,0 +1,3 @@
+# SQLPage display progress
+
+This is a very simple example of a page that shows a spinner to indicate page is loading.
\ No newline at end of file
diff --git a/examples/show-progress/index.sql b/examples/show-progress/index.sql
new file mode 100644
index 00000000..be5cd8ae
--- /dev/null
+++ b/examples/show-progress/index.sql
@@ -0,0 +1,17 @@
+SELECT 'spinner-start' AS component;
+SELECT 'spinner-progress' AS component,
+  '0' AS percent,
+  'Sleeping 3 seconds' AS stage; 
+SELECT sqlpage.exec('sleep', '3');
+
+SELECT 'spinner-progress' AS component,
+  '30' AS percent,
+  'Sleeping 5 seconds' AS stage; 
+SELECT sqlpage.exec('sleep', '5');
+
+/* stage property is optional */
+SELECT 'spinner-progress' AS component,
+  '80' AS percent;
+SELECT sqlpage.exec('sleep', '1');
+
+SELECT 'spinner-stop' AS component;
diff --git a/examples/show-progress/sqlpage/sqlpage.yml b/examples/show-progress/sqlpage/sqlpage.yml
new file mode 100644
index 00000000..d38d9a20
--- /dev/null
+++ b/examples/show-progress/sqlpage/sqlpage.yml
@@ -0,0 +1,3 @@
+allow_exec: True
+compress_responses: False
+database_url: "sqlite://:memory:"
diff --git a/sqlpage/sqlpage.css b/sqlpage/sqlpage.css
index f0290cb0..5cbb1108 100644
--- a/sqlpage/sqlpage.css
+++ b/sqlpage/sqlpage.css
@@ -50,4 +50,67 @@ td > p {
 .datagrid {
   --tblr-datagrid-padding: 1.25rem;
   --tblr-datagrid-item-width: 12rem;
-}
\ No newline at end of file
+}
+
+/* spinner container */
+div.sqlpage-spinner-start {
+  /* TODO: center this */
+  position: absolute;
+  left: 50vw;
+  top: 50vh;
+  margin-top: -5.5em;
+  margin-left: -87.5px;
+  padding-bottom: 2em;
+  height: 9em;
+  width: 175px;
+}
+div.sqlpage-spinner-start:not(:has(+ .sqlpage-spinner-stop)) {
+  /* only display if not followed by sqlpage-spinner-stop */
+  display: block;
+}
+.sqlpage-spinner-start:not(:last-child) {
+  /* firefox doesn't support :has
+     so hide the spinner if is no longer the last element */
+  display: none;
+}
+
+/* default indeterminate loader */
+.sqlpage-loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid var(--tblr-body-color);
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: sqlpage-loader-rotation 1s linear infinite;
+}
+
+@keyframes sqlpage-loader-rotation {
+  0% {
+      transform: rotate(0deg);
+  }
+  100% {
+      transform: rotate(360deg);
+  }
+}
+
+/* progress indicator container */
+div.sqlpage-spinner-progress {
+  margin: 1em 0 1em;
+}
+div.sqlpage-spinner-progress:not(:has(+ .sqlpage-spinner-progress)) {
+  /* only display if not followed by progress update */
+  display: block;
+}
+.sqlpage-spinner-progress:not(:last-child) {
+  /* firefox doesn't support :has
+     so hide the spinner if is no longer the last element */
+  display: none;
+}
+.sqlpage-spinner-progress label {
+  text-align:left;
+}
+.sqlpage-spinner-progress label:after {
+  content: "...";
+}
diff --git a/sqlpage/templates/spinner-progress.handlebars b/sqlpage/templates/spinner-progress.handlebars
new file mode 100644
index 00000000..1550d12b
--- /dev/null
+++ b/sqlpage/templates/spinner-progress.handlebars
@@ -0,0 +1,7 @@
+<div class="sqlpage-spinner-progress">
+  <progress id="sqlpage-loading-{{default stage "progress"}}" value="{{percent}}" max="100"></progress>
+  {{#if stage}}
+  <br/>
+  <label for="sqlpage-loading-{{stage}}">{{stage}}</label>
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/sqlpage/templates/spinner-start.handlebars b/sqlpage/templates/spinner-start.handlebars
new file mode 100644
index 00000000..a0fa1bf6
--- /dev/null
+++ b/sqlpage/templates/spinner-start.handlebars
@@ -0,0 +1,2 @@
+<div {{#if id}}id="{{id}}"{{/if}} class="sqlpage-spinner-start">
+  <span class="{{default spinner "sqlpage-loader"}}"></span>
\ No newline at end of file
diff --git a/sqlpage/templates/spinner-stop.handlebars b/sqlpage/templates/spinner-stop.handlebars
new file mode 100644
index 00000000..32ef9574
--- /dev/null
+++ b/sqlpage/templates/spinner-stop.handlebars
@@ -0,0 +1,2 @@
+</div>
+<div class="sqlpage-spinner-stop" />
\ No newline at end of file

From 5201f766e23c3b1d1f727f454d8b2f9302dc7d6f Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <Daniel.Sheffield@first-watch.co.nz>
Date: Mon, 24 Jun 2024 09:58:37 +1200
Subject: [PATCH 02/15] center the spinner

---
 examples/show-progress/index.sql | 25 +++++++++++++++++++------
 sqlpage/sqlpage.css              |  4 ++--
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/examples/show-progress/index.sql b/examples/show-progress/index.sql
index be5cd8ae..7b76c5e4 100644
--- a/examples/show-progress/index.sql
+++ b/examples/show-progress/index.sql
@@ -1,17 +1,30 @@
 SELECT 'spinner-start' AS component;
 SELECT 'spinner-progress' AS component,
   '0' AS percent,
-  'Sleeping 3 seconds' AS stage; 
-SELECT sqlpage.exec('sleep', '3');
+  'Sleeping 1 second' AS stage;
+SELECT sqlpage.exec('sleep', '1');
 
 SELECT 'spinner-progress' AS component,
-  '30' AS percent,
-  'Sleeping 5 seconds' AS stage; 
-SELECT sqlpage.exec('sleep', '5');
+  '20' AS percent,
+  'Sleeping 1 more second' AS stage;
+SELECT sqlpage.exec('sleep', '1');
 
 /* stage property is optional */
 SELECT 'spinner-progress' AS component,
-  '80' AS percent;
+  '40' AS percent;
 SELECT sqlpage.exec('sleep', '1');
 
+SELECT 'spinner-progress' AS component,
+  '60' AS percent,
+  'Sleeping 2 seconds' AS stage;
+SELECT sqlpage.exec('sleep', '2');
+
+SELECT 'spinner-progress' AS component,
+  '100' AS percent;
+
 SELECT 'spinner-stop' AS component;
+
+SELECT 'text' AS component,
+  'It works!' AS title,
+  TRUE AS center,
+  'Page is loaded.' AS contents;
diff --git a/sqlpage/sqlpage.css b/sqlpage/sqlpage.css
index 5cbb1108..b38bdef6 100644
--- a/sqlpage/sqlpage.css
+++ b/sqlpage/sqlpage.css
@@ -54,8 +54,8 @@ td > p {
 
 /* spinner container */
 div.sqlpage-spinner-start {
-  /* TODO: center this */
-  position: absolute;
+  position: fixed;
+  text-align: center;
   left: 50vw;
   top: 50vh;
   margin-top: -5.5em;

From 4c1b2a75fe5ce8562529bba79153f41d4732ff8d Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <Daniel.Sheffield@first-watch.co.nz>
Date: Mon, 24 Jun 2024 10:04:28 +1200
Subject: [PATCH 03/15] use tabler spinner by default

---
 examples/show-progress/index.sql           |  4 +++-
 sqlpage/sqlpage.css                        | 21 ---------------------
 sqlpage/templates/spinner-start.handlebars |  2 +-
 3 files changed, 4 insertions(+), 23 deletions(-)

diff --git a/examples/show-progress/index.sql b/examples/show-progress/index.sql
index 7b76c5e4..35b26808 100644
--- a/examples/show-progress/index.sql
+++ b/examples/show-progress/index.sql
@@ -1,4 +1,6 @@
-SELECT 'spinner-start' AS component;
+SELECT 'spinner-start' AS component,
+  -- default is "spinner-border"
+  "spinner-grow text-red" AS spinner;
 SELECT 'spinner-progress' AS component,
   '0' AS percent,
   'Sleeping 1 second' AS stage;
diff --git a/sqlpage/sqlpage.css b/sqlpage/sqlpage.css
index b38bdef6..43f95e6f 100644
--- a/sqlpage/sqlpage.css
+++ b/sqlpage/sqlpage.css
@@ -74,27 +74,6 @@ div.sqlpage-spinner-start:not(:has(+ .sqlpage-spinner-stop)) {
   display: none;
 }
 
-/* default indeterminate loader */
-.sqlpage-loader {
-  width: 48px;
-  height: 48px;
-  border: 5px solid var(--tblr-body-color);
-  border-bottom-color: transparent;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: sqlpage-loader-rotation 1s linear infinite;
-}
-
-@keyframes sqlpage-loader-rotation {
-  0% {
-      transform: rotate(0deg);
-  }
-  100% {
-      transform: rotate(360deg);
-  }
-}
-
 /* progress indicator container */
 div.sqlpage-spinner-progress {
   margin: 1em 0 1em;
diff --git a/sqlpage/templates/spinner-start.handlebars b/sqlpage/templates/spinner-start.handlebars
index a0fa1bf6..2f0e02e0 100644
--- a/sqlpage/templates/spinner-start.handlebars
+++ b/sqlpage/templates/spinner-start.handlebars
@@ -1,2 +1,2 @@
 <div {{#if id}}id="{{id}}"{{/if}} class="sqlpage-spinner-start">
-  <span class="{{default spinner "sqlpage-loader"}}"></span>
\ No newline at end of file
+  <span class="{{default spinner "spinner-border"}}"></span>
\ No newline at end of file

From 065792d3c80cd438d9d1761b3ffc86621c81012b Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <Daniel.Sheffield@first-watch.co.nz>
Date: Mon, 24 Jun 2024 10:05:14 +1200
Subject: [PATCH 04/15] fix whitespace

---
 sqlpage/templates/spinner-progress.handlebars | 2 +-
 sqlpage/templates/spinner-start.handlebars    | 2 +-
 sqlpage/templates/spinner-stop.handlebars     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/sqlpage/templates/spinner-progress.handlebars b/sqlpage/templates/spinner-progress.handlebars
index 1550d12b..f2bf9ac3 100644
--- a/sqlpage/templates/spinner-progress.handlebars
+++ b/sqlpage/templates/spinner-progress.handlebars
@@ -4,4 +4,4 @@
   <br/>
   <label for="sqlpage-loading-{{stage}}">{{stage}}</label>
   {{/if}}
-</div>
\ No newline at end of file
+</div>
diff --git a/sqlpage/templates/spinner-start.handlebars b/sqlpage/templates/spinner-start.handlebars
index 2f0e02e0..e37cb561 100644
--- a/sqlpage/templates/spinner-start.handlebars
+++ b/sqlpage/templates/spinner-start.handlebars
@@ -1,2 +1,2 @@
 <div {{#if id}}id="{{id}}"{{/if}} class="sqlpage-spinner-start">
-  <span class="{{default spinner "spinner-border"}}"></span>
\ No newline at end of file
+  <span class="{{default spinner "spinner-border"}}"></span>
diff --git a/sqlpage/templates/spinner-stop.handlebars b/sqlpage/templates/spinner-stop.handlebars
index 32ef9574..4f1b3527 100644
--- a/sqlpage/templates/spinner-stop.handlebars
+++ b/sqlpage/templates/spinner-stop.handlebars
@@ -1,2 +1,2 @@
 </div>
-<div class="sqlpage-spinner-stop" />
\ No newline at end of file
+<div class="sqlpage-spinner-stop" />

From 6761c4de35e41f82f2d98ca72be4d91a91d073cf Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <Daniel.Sheffield@first-watch.co.nz>
Date: Mon, 24 Jun 2024 12:18:18 +1200
Subject: [PATCH 05/15] add example of progress on it's own

---
 examples/show-progress/index.sql              | 43 ++++++++++++------
 sqlpage/sqlpage.css                           | 33 +++++++-------
 sqlpage/templates/loader-start.handlebars     |  2 +
 sqlpage/templates/loader-stop.handlebars      |  2 +
 sqlpage/templates/progress.handlebars         | 44 +++++++++++++++++++
 sqlpage/templates/spinner-progress.handlebars |  7 ---
 sqlpage/templates/spinner-start.handlebars    |  2 -
 sqlpage/templates/spinner-stop.handlebars     |  2 -
 8 files changed, 96 insertions(+), 39 deletions(-)
 create mode 100644 sqlpage/templates/loader-start.handlebars
 create mode 100644 sqlpage/templates/loader-stop.handlebars
 create mode 100644 sqlpage/templates/progress.handlebars
 delete mode 100644 sqlpage/templates/spinner-progress.handlebars
 delete mode 100644 sqlpage/templates/spinner-start.handlebars
 delete mode 100644 sqlpage/templates/spinner-stop.handlebars

diff --git a/examples/show-progress/index.sql b/examples/show-progress/index.sql
index 35b26808..7d86f1e3 100644
--- a/examples/show-progress/index.sql
+++ b/examples/show-progress/index.sql
@@ -1,32 +1,49 @@
-SELECT 'spinner-start' AS component,
+SELECT 'shell' AS component,
+  'dark' AS theme;
+
+SELECT 'loader-start' AS component,
   -- default is "spinner-border"
   "spinner-grow text-red" AS spinner;
-SELECT 'spinner-progress' AS component,
+
+SELECT 'progress' AS component,
+  'sm' AS size,
+  'yellow' AS color,
   '0' AS percent,
   'Sleeping 1 second' AS stage;
 SELECT sqlpage.exec('sleep', '1');
 
-SELECT 'spinner-progress' AS component,
-  '20' AS percent,
-  'Sleeping 1 more second' AS stage;
+/* percent property is optional */
+SELECT 'progress' AS component,
+  NULL AS percent,
+  'sm' AS size,
+  'yellow' AS color,
+  'Doing something' AS stage;
 SELECT sqlpage.exec('sleep', '1');
 
 /* stage property is optional */
-SELECT 'spinner-progress' AS component,
+SELECT 'progress' AS component,
+  'sm' AS size,
+  'yellow' AS color,
   '40' AS percent;
 SELECT sqlpage.exec('sleep', '1');
 
-SELECT 'spinner-progress' AS component,
-  '60' AS percent,
-  'Sleeping 2 seconds' AS stage;
-SELECT sqlpage.exec('sleep', '2');
+/* multiple rows */
+SELECT 'progress' AS component, 'sm' AS size, 'yellow' AS color;
+SELECT '70' AS percent, 'Sleeping 1 second' AS stage
+SELECT sqlpage.exec('sleep', '1');
+SELECT '80' AS percent, 'Sleeping 1 more second' AS stage;
+SELECT sqlpage.exec('sleep', '1');
+SELECT '90' AS percent, 'Sleeping 1 second again' AS stage;
+SELECT sqlpage.exec('sleep', '1');
 
-SELECT 'spinner-progress' AS component,
-  '100' AS percent;
+SELECT '100' AS percent;
 
-SELECT 'spinner-stop' AS component;
+SELECT 'loader-stop' AS component;
 
 SELECT 'text' AS component,
   'It works!' AS title,
   TRUE AS center,
   'Page is loaded.' AS contents;
+
+-- can use progress on it's own
+SELECT 'progress' AS component, 'Waiting for user' AS stage;
\ No newline at end of file
diff --git a/sqlpage/sqlpage.css b/sqlpage/sqlpage.css
index 43f95e6f..f588592a 100644
--- a/sqlpage/sqlpage.css
+++ b/sqlpage/sqlpage.css
@@ -52,8 +52,8 @@ td > p {
   --tblr-datagrid-item-width: 12rem;
 }
 
-/* spinner container */
-div.sqlpage-spinner-start {
+/* loader container */
+div.sqlpage-loader-start {
   position: fixed;
   text-align: center;
   left: 50vw;
@@ -64,32 +64,35 @@ div.sqlpage-spinner-start {
   height: 9em;
   width: 175px;
 }
-div.sqlpage-spinner-start:not(:has(+ .sqlpage-spinner-stop)) {
-  /* only display if not followed by sqlpage-spinner-stop */
+div.sqlpage-loader-start:not(:has(+ .sqlpage-loader-stop)) {
+  /* only display if not followed by sqlpage-loader-stop */
   display: block;
 }
-.sqlpage-spinner-start:not(:last-child) {
+.sqlpage-loader-start:not(:last-child) {
   /* firefox doesn't support :has
-     so hide the spinner if is no longer the last element */
+     so hide the loader if it is no longer the last element */
   display: none;
 }
+/* end loader container */
 
-/* progress indicator container */
-div.sqlpage-spinner-progress {
+/* progress container */
+.sqlpage-progress-container {
   margin: 1em 0 1em;
 }
-div.sqlpage-spinner-progress:not(:has(+ .sqlpage-spinner-progress)) {
-  /* only display if not followed by progress update */
+div.sqlpage-progress-container:not(:has(+ .sqlpage-progress-container)) {
+  /* only display if not followed by sqlpage-progress-container */
   display: block;
 }
-.sqlpage-spinner-progress:not(:last-child) {
+.sqlpage-progress-container:not(:last-child) {
   /* firefox doesn't support :has
-     so hide the spinner if is no longer the last element */
+     so hide the loader if it is no longer the last element */
   display: none;
 }
-.sqlpage-spinner-progress label {
+.sqlpage-progress-container label {
   text-align:left;
+  color: var(--tblr-text-primary);
 }
-.sqlpage-spinner-progress label:after {
-  content: "...";
+.sqlpage-progress-container label:after {
+  content: "…";
 }
+/* end progress container */
\ No newline at end of file
diff --git a/sqlpage/templates/loader-start.handlebars b/sqlpage/templates/loader-start.handlebars
new file mode 100644
index 00000000..17d311a5
--- /dev/null
+++ b/sqlpage/templates/loader-start.handlebars
@@ -0,0 +1,2 @@
+<div {{#if id}}id="{{id}}"{{/if}} class="sqlpage-loader-start">
+  <span class="{{default spinner "spinner-border"}}"></span>
diff --git a/sqlpage/templates/loader-stop.handlebars b/sqlpage/templates/loader-stop.handlebars
new file mode 100644
index 00000000..791b7b84
--- /dev/null
+++ b/sqlpage/templates/loader-stop.handlebars
@@ -0,0 +1,2 @@
+</div>
+<div class="sqlpage-loader-stop" />
diff --git a/sqlpage/templates/progress.handlebars b/sqlpage/templates/progress.handlebars
new file mode 100644
index 00000000..64f83eb7
--- /dev/null
+++ b/sqlpage/templates/progress.handlebars
@@ -0,0 +1,44 @@
+{{#if (or percent stage)}}
+  <div class="sqlpage-progress-container">
+    <div class="progress {{~#if size}} progress-{{size}}{{/if}}">
+      <div
+        id="sqlpage-loading-{{default stage "progress"}}"
+        class="progress-bar
+        {{~#if (not percent)}} progress-bar-indeterminate{{/if}}
+        {{~#if color}} bg-{{color}}{{/if}}"
+        role="progressbar"
+        aria-valuenow="{{percent}}"
+        {{~#if percent}}style="width: {{percent}}%; display: block"{{/if}} 
+        aria-valuemin="0" aria-valuemax="100"
+        {{~#if stage}}aria-label="{{stage}}"{{/if}}>
+      </div>
+    </div>
+    {{~#if stage}}
+      <br>
+      <label for="sqlpage-loading-{{default stage "progress"}}">{{stage}}</label>
+    {{/if}}
+  </div>
+{{/if}}
+{{#each_row}}
+{{#if (or percent stage)}}
+  <div class="sqlpage-progress-container">
+    <div class="progress {{~#if ../size}} progress-{{../size}}{{/if}}">
+      <div
+        id="sqlpage-loading-{{default stage "progress"}}"
+        class="progress-bar
+        {{~#if (not percent)}} progress-bar-indeterminate{{/if}}
+        {{~#if ../color}} bg-{{../color}}{{/if}}"
+        role="progressbar"
+        aria-valuenow="{{percent}}"
+        {{~#if percent}}style="width: {{percent}}%; display: block"{{/if}} 
+        aria-valuemin="0" aria-valuemax="100"
+        {{~#if stage}}aria-label="{{stage}}"{{/if}}>
+      </div>
+    </div>
+    {{~#if stage}}
+      <br>
+      <label for="sqlpage-loading-{{default stage "progress"}}">{{stage}}</label>
+    {{/if}}
+  </div>
+{{/if}}
+{{/each_row}}
diff --git a/sqlpage/templates/spinner-progress.handlebars b/sqlpage/templates/spinner-progress.handlebars
deleted file mode 100644
index f2bf9ac3..00000000
--- a/sqlpage/templates/spinner-progress.handlebars
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="sqlpage-spinner-progress">
-  <progress id="sqlpage-loading-{{default stage "progress"}}" value="{{percent}}" max="100"></progress>
-  {{#if stage}}
-  <br/>
-  <label for="sqlpage-loading-{{stage}}">{{stage}}</label>
-  {{/if}}
-</div>
diff --git a/sqlpage/templates/spinner-start.handlebars b/sqlpage/templates/spinner-start.handlebars
deleted file mode 100644
index e37cb561..00000000
--- a/sqlpage/templates/spinner-start.handlebars
+++ /dev/null
@@ -1,2 +0,0 @@
-<div {{#if id}}id="{{id}}"{{/if}} class="sqlpage-spinner-start">
-  <span class="{{default spinner "spinner-border"}}"></span>
diff --git a/sqlpage/templates/spinner-stop.handlebars b/sqlpage/templates/spinner-stop.handlebars
deleted file mode 100644
index 4f1b3527..00000000
--- a/sqlpage/templates/spinner-stop.handlebars
+++ /dev/null
@@ -1,2 +0,0 @@
-</div>
-<div class="sqlpage-spinner-stop" />

From 4e4c473f116535b22f362e83be8f7cb969d76015 Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <Daniel.Sheffield@first-watch.co.nz>
Date: Mon, 24 Jun 2024 12:19:04 +1200
Subject: [PATCH 06/15] fix whitespace

---
 examples/show-progress/index.sql | 2 +-
 sqlpage/sqlpage.css              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/show-progress/index.sql b/examples/show-progress/index.sql
index 7d86f1e3..8fa76191 100644
--- a/examples/show-progress/index.sql
+++ b/examples/show-progress/index.sql
@@ -46,4 +46,4 @@ SELECT 'text' AS component,
   'Page is loaded.' AS contents;
 
 -- can use progress on it's own
-SELECT 'progress' AS component, 'Waiting for user' AS stage;
\ No newline at end of file
+SELECT 'progress' AS component, 'Waiting for user' AS stage;
diff --git a/sqlpage/sqlpage.css b/sqlpage/sqlpage.css
index f588592a..54bbc865 100644
--- a/sqlpage/sqlpage.css
+++ b/sqlpage/sqlpage.css
@@ -95,4 +95,4 @@ div.sqlpage-progress-container:not(:has(+ .sqlpage-progress-container)) {
 .sqlpage-progress-container label:after {
   content: "…";
 }
-/* end progress container */
\ No newline at end of file
+/* end progress container */

From 15f129a54e46bc3f997a4d8741da2c71c19fd5e9 Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <Daniel.Sheffield@first-watch.co.nz>
Date: Mon, 24 Jun 2024 12:34:01 +1200
Subject: [PATCH 07/15] add example of loader without spinner

---
 examples/show-progress/go.sql    | 13 +++++++++++++
 examples/show-progress/index.sql |  3 +++
 2 files changed, 16 insertions(+)
 create mode 100644 examples/show-progress/go.sql

diff --git a/examples/show-progress/go.sql b/examples/show-progress/go.sql
new file mode 100644
index 00000000..c571eead
--- /dev/null
+++ b/examples/show-progress/go.sql
@@ -0,0 +1,13 @@
+-- can disable the spinner to show only progress bar
+SELECT 'loader-start' AS component,  'non-existent-class' AS spinner;
+
+SELECT 'progress' AS component,
+  NULL AS percent,
+  'sm' AS size,
+  'yellow' AS color,
+  'Working on it' AS stage;
+SELECT sqlpage.exec('sleep', '3');
+
+SELECT 'loader-stop' AS component,  NULL AS spinner;
+
+SELECT 'text' AS component, 'Processing complete.' AS contents;
\ No newline at end of file
diff --git a/examples/show-progress/index.sql b/examples/show-progress/index.sql
index 8fa76191..38323290 100644
--- a/examples/show-progress/index.sql
+++ b/examples/show-progress/index.sql
@@ -45,5 +45,8 @@ SELECT 'text' AS component,
   TRUE AS center,
   'Page is loaded.' AS contents;
 
+SELECT 'button' AS component;
+SELECT 'Go' AS title, '/go.sql' AS link;
+
 -- can use progress on it's own
 SELECT 'progress' AS component, 'Waiting for user' AS stage;

From 867641dda079af4b399fb9397ce241bfe2b62ee9 Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <Daniel.Sheffield@first-watch.co.nz>
Date: Mon, 24 Jun 2024 12:34:49 +1200
Subject: [PATCH 08/15] fix whitespace

---
 examples/show-progress/go.sql | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/show-progress/go.sql b/examples/show-progress/go.sql
index c571eead..f76924ef 100644
--- a/examples/show-progress/go.sql
+++ b/examples/show-progress/go.sql
@@ -10,4 +10,4 @@ SELECT sqlpage.exec('sleep', '3');
 
 SELECT 'loader-stop' AS component,  NULL AS spinner;
 
-SELECT 'text' AS component, 'Processing complete.' AS contents;
\ No newline at end of file
+SELECT 'text' AS component, 'Processing complete.' AS contents;

From a98b39bb20a2512f16f3039a750aa902375c2cbd Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <Daniel.Sheffield@first-watch.co.nz>
Date: Mon, 24 Jun 2024 13:43:22 +1200
Subject: [PATCH 09/15] no spinner if not specified

---
 examples/show-progress/go.sql             | 6 ++++--
 examples/show-progress/index.sql          | 9 ++++-----
 sqlpage/templates/loader-start.handlebars | 2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/examples/show-progress/go.sql b/examples/show-progress/go.sql
index f76924ef..3c2d8e2d 100644
--- a/examples/show-progress/go.sql
+++ b/examples/show-progress/go.sql
@@ -1,5 +1,7 @@
+SELECT 'shell' AS component, 'light' AS theme;
+
 -- can disable the spinner to show only progress bar
-SELECT 'loader-start' AS component,  'non-existent-class' AS spinner;
+SELECT 'loader-start' AS component,  NULL AS spinner;
 
 SELECT 'progress' AS component,
   NULL AS percent,
@@ -8,6 +10,6 @@ SELECT 'progress' AS component,
   'Working on it' AS stage;
 SELECT sqlpage.exec('sleep', '3');
 
-SELECT 'loader-stop' AS component,  NULL AS spinner;
+SELECT 'loader-stop' AS component;
 
 SELECT 'text' AS component, 'Processing complete.' AS contents;
diff --git a/examples/show-progress/index.sql b/examples/show-progress/index.sql
index 38323290..00d018fe 100644
--- a/examples/show-progress/index.sql
+++ b/examples/show-progress/index.sql
@@ -1,9 +1,8 @@
-SELECT 'shell' AS component,
-  'dark' AS theme;
+SELECT 'shell' AS component, 'dark' AS theme;
 
 SELECT 'loader-start' AS component,
-  -- default is "spinner-border"
-  "spinner-grow text-red" AS spinner;
+  -- pick from the tabler spinners: https://tabler.io/docs/components/spinners
+  "spinner-border spinner-border-sm text-red" AS spinner;
 
 SELECT 'progress' AS component,
   'sm' AS size,
@@ -49,4 +48,4 @@ SELECT 'button' AS component;
 SELECT 'Go' AS title, '/go.sql' AS link;
 
 -- can use progress on it's own
-SELECT 'progress' AS component, 'Waiting for user' AS stage;
+SELECT 'progress' AS component, 'sm' AS size, 'Waiting for user' AS stage;
diff --git a/sqlpage/templates/loader-start.handlebars b/sqlpage/templates/loader-start.handlebars
index 17d311a5..c121b02e 100644
--- a/sqlpage/templates/loader-start.handlebars
+++ b/sqlpage/templates/loader-start.handlebars
@@ -1,2 +1,2 @@
 <div {{#if id}}id="{{id}}"{{/if}} class="sqlpage-loader-start">
-  <span class="{{default spinner "spinner-border"}}"></span>
+  {{#if spinner}}<span class="{{spinner}}"></span>{{/if}}

From df752bfdd62f832a20e2b11b1595df64ae4e4cf8 Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <Daniel.Sheffield@first-watch.co.nz>
Date: Wed, 26 Jun 2024 17:21:54 +1200
Subject: [PATCH 10/15] improve top-level params of spinner component and add
 documentation

---
 .../examples}/show-progress/README.md         |  0
 .../examples}/show-progress/go.sql            |  4 +-
 .../examples}/show-progress/index.sql         | 26 ++++----
 .../sqlpage/migrations/01_documentation.sql   | 64 +++++++++++++++++++
 examples/official-site/sqlpage/sqlpage.yaml   |  5 +-
 examples/show-progress/sqlpage/sqlpage.yml    |  3 -
 sqlpage/templates/loader-start.handlebars     |  4 +-
 7 files changed, 87 insertions(+), 19 deletions(-)
 rename examples/{ => official-site/examples}/show-progress/README.md (100%)
 rename examples/{ => official-site/examples}/show-progress/go.sql (76%)
 rename examples/{ => official-site/examples}/show-progress/index.sql (62%)
 delete mode 100644 examples/show-progress/sqlpage/sqlpage.yml

diff --git a/examples/show-progress/README.md b/examples/official-site/examples/show-progress/README.md
similarity index 100%
rename from examples/show-progress/README.md
rename to examples/official-site/examples/show-progress/README.md
diff --git a/examples/show-progress/go.sql b/examples/official-site/examples/show-progress/go.sql
similarity index 76%
rename from examples/show-progress/go.sql
rename to examples/official-site/examples/show-progress/go.sql
index 3c2d8e2d..4fe5af94 100644
--- a/examples/show-progress/go.sql
+++ b/examples/official-site/examples/show-progress/go.sql
@@ -1,14 +1,14 @@
 SELECT 'shell' AS component, 'light' AS theme;
 
 -- can disable the spinner to show only progress bar
-SELECT 'loader-start' AS component,  NULL AS spinner;
+SELECT 'loader-start' AS component,  '' AS spinner;
 
 SELECT 'progress' AS component,
   NULL AS percent,
   'sm' AS size,
   'yellow' AS color,
   'Working on it' AS stage;
-SELECT sqlpage.exec('sleep', '3');
+SELECT sqlpage.fetch('https://example.com');
 
 SELECT 'loader-stop' AS component;
 
diff --git a/examples/show-progress/index.sql b/examples/official-site/examples/show-progress/index.sql
similarity index 62%
rename from examples/show-progress/index.sql
rename to examples/official-site/examples/show-progress/index.sql
index 00d018fe..07dbb6d4 100644
--- a/examples/show-progress/index.sql
+++ b/examples/official-site/examples/show-progress/index.sql
@@ -2,14 +2,16 @@ SELECT 'shell' AS component, 'dark' AS theme;
 
 SELECT 'loader-start' AS component,
   -- pick from the tabler spinners: https://tabler.io/docs/components/spinners
-  "spinner-border spinner-border-sm text-red" AS spinner;
+  "spinner-border" spinner,
+  "sm" AS size,
+  "red" AS color;
 
 SELECT 'progress' AS component,
   'sm' AS size,
   'yellow' AS color,
   '0' AS percent,
-  'Sleeping 1 second' AS stage;
-SELECT sqlpage.exec('sleep', '1');
+  'Fething data' AS stage;
+SELECT sqlpage.fetch('https://example.com');
 
 /* percent property is optional */
 SELECT 'progress' AS component,
@@ -17,23 +19,23 @@ SELECT 'progress' AS component,
   'sm' AS size,
   'yellow' AS color,
   'Doing something' AS stage;
-SELECT sqlpage.exec('sleep', '1');
+SELECT sqlpage.fetch('https://example.com');
 
 /* stage property is optional */
 SELECT 'progress' AS component,
   'sm' AS size,
   'yellow' AS color,
   '40' AS percent;
-SELECT sqlpage.exec('sleep', '1');
+SELECT sqlpage.fetch('https://example.com');
 
 /* multiple rows */
 SELECT 'progress' AS component, 'sm' AS size, 'yellow' AS color;
-SELECT '70' AS percent, 'Sleeping 1 second' AS stage
-SELECT sqlpage.exec('sleep', '1');
-SELECT '80' AS percent, 'Sleeping 1 more second' AS stage;
-SELECT sqlpage.exec('sleep', '1');
-SELECT '90' AS percent, 'Sleeping 1 second again' AS stage;
-SELECT sqlpage.exec('sleep', '1');
+SELECT '70' AS percent, 'Fetching data' AS stage
+SELECT sqlpage.fetch('https://example.com');
+SELECT '80' AS percent, 'Fetching more data' AS stage;
+SELECT sqlpage.fetch('https://example.com');
+SELECT '90' AS percent, 'Fetching again' AS stage;
+SELECT sqlpage.fetch('https://example.com');
 
 SELECT '100' AS percent;
 
@@ -45,7 +47,7 @@ SELECT 'text' AS component,
   'Page is loaded.' AS contents;
 
 SELECT 'button' AS component;
-SELECT 'Go' AS title, '/go.sql' AS link;
+SELECT 'Go' AS title, './go.sql' AS link;
 
 -- can use progress on it's own
 SELECT 'progress' AS component, 'sm' AS size, 'Waiting for user' AS stage;
diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
index 937a9e0e..c448a8e5 100644
--- a/examples/official-site/sqlpage/migrations/01_documentation.sql
+++ b/examples/official-site/sqlpage/migrations/01_documentation.sql
@@ -757,6 +757,69 @@ and `shell.json` would be placed at the website''s root and contain the followin
 ```
 ', NULL);
 
+INSERT INTO component(name, icon, description, introduced_in_version) VALUES
+    ('loader-start', 'refresh', 'Display a spinner to indicate page is loading.', '0.25.0');
+
+INSERT INTO parameter(component, name, description_md, type, top_level, optional) SELECT 'loader-start', * FROM (VALUES
+    ('spinner', '
+The name of a [spinner](https://tabler.io/docs/components/spinners) (from tabler.io).
+Default is "spinner-border".
+Set to the empty string to disable the spinner - e.g. to display only progress
+updates.
+', 'TEXT', TRUE, TRUE),
+    ('size', 'Size of the spinner eg. sm, lg', 'TEXT', TRUE, TRUE),
+    ('color', 'Color of the spinner', 'COLOR', TRUE, TRUE)
+) x;
+
+INSERT INTO component(name, icon, description, introduced_in_version) VALUES
+    ('loader-stop', 'refresh-off', '
+Hide the spinner displayed by the loader-start component.
+', '0.25.0');
+
+INSERT INTO component(name, icon, description, introduced_in_version) VALUES
+    ('progress', 'time-duration-15', 'Display a progress bar.', '0.25.0');
+
+INSERT INTO example(component, description, properties) VALUES
+    ('loader-start', '
+Will be displayed until [loader-stop](/documentation.sql?component=loader-stop) is selected.
+
+See the [live example](/examples/show-progress/).
+
+Source is [here](https://github.com/lovasoa/SQLpage/tree/main/examples/official-site/examples/show-progress)
+', NULL),
+    ('loader-stop', '
+Hide the spinner displayed by the [loader-start](/documentation.sql?component=loader-start) component.
+
+See the [live example](/examples/show-progress/).
+
+Source is [here](https://github.com/lovasoa/SQLpage/tree/main/examples/official-site/examples/show-progress)
+', NULL),
+    ('progress', '
+Can be used on it''s own (will persist on the page) or with
+[loader-start](/documentation.sql?component=loader-start) and
+[loader-stop](/documentation.sql?component=loader-stop) to hide the progress bar once processing
+is complete.
+
+Subsequent uses of this component and/or any rows will
+update the progress bar.
+
+See the [live example](/examples/show-progress/).
+
+Source is [here](https://github.com/lovasoa/SQLpage/tree/main/examples/official-site/examples/show-progress)
+', NULL)
+;
+
+INSERT INTO parameter(component, name, description_md, type, top_level, optional) SELECT 'progress', * FROM (VALUES
+    -- top-level
+    ('percent', 'Number between 0 and 100.', 'INTEGER', TRUE, TRUE),
+    ('stage', 'A message to display under the progress bar to indicate which stage the process is at.', 'TEXT', TRUE, TRUE),
+    ('color', 'The fill color of the progress bar', 'COLOR', TRUE, TRUE),
+    ('size', 'The size of the progress bar [see here](https://tabler.io/docs/components/progress)', 'TEXT', TRUE, TRUE),
+    -- item-level
+    ('percent', 'Number between 0 and 100.', 'INTEGER', FALSE, TRUE),
+    ('stage', 'A message to display under the progress bar to indicate which stage the process is at.', 'TEXT', FALSE, TRUE)
+) x;
+
 INSERT INTO component(name, icon, description) VALUES
     ('shell', 'layout-navbar', 'Personalize the "shell" surrounding your page contents. Used to set properties for the entire page.');
 
@@ -819,6 +882,7 @@ You see the [page layouts demo](./examples/layouts.sql) for a live example of th
                     {"link": "/examples/multistep-form", "title": "Forms", "icon": "edit"},
                     {"link": "/examples/handle_picture_upload.sql", "title": "File uploads", "icon": "upload"},
                     {"link": "/examples/authentication/", "title": "Password protection", "icon": "password-user"},
+                    {"link": "/examples/show-progress/", "title": "Tracking progress of background tasks", "icon": "loader-2"},
                     {"link": "//github.com/lovasoa/SQLpage/blob/main/examples/", "title": "All examples & demos", "icon": "code"}
                 ]},
                 {"title": "Community", "submenu": [
diff --git a/examples/official-site/sqlpage/sqlpage.yaml b/examples/official-site/sqlpage/sqlpage.yaml
index d159198d..425748ec 100644
--- a/examples/official-site/sqlpage/sqlpage.yaml
+++ b/examples/official-site/sqlpage/sqlpage.yaml
@@ -2,4 +2,7 @@
 database_url: "sqlite::memory:"
 
 # We have a file upload example, and would like to limit the size of the uploaded files 
-max_uploaded_file_size: 256000
\ No newline at end of file
+max_uploaded_file_size: 256000
+
+# For the show-progress example to work, we have to disable compression
+compress_responses: False
\ No newline at end of file
diff --git a/examples/show-progress/sqlpage/sqlpage.yml b/examples/show-progress/sqlpage/sqlpage.yml
deleted file mode 100644
index d38d9a20..00000000
--- a/examples/show-progress/sqlpage/sqlpage.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-allow_exec: True
-compress_responses: False
-database_url: "sqlite://:memory:"
diff --git a/sqlpage/templates/loader-start.handlebars b/sqlpage/templates/loader-start.handlebars
index c121b02e..3538b3ad 100644
--- a/sqlpage/templates/loader-start.handlebars
+++ b/sqlpage/templates/loader-start.handlebars
@@ -1,2 +1,4 @@
 <div {{#if id}}id="{{id}}"{{/if}} class="sqlpage-loader-start">
-  {{#if spinner}}<span class="{{spinner}}"></span>{{/if}}
+  {{#if spinner}}<span class="{{default spinner "spinner-border"}}
+    {{#if size}}spinner-border-{{size}}{{/if}}
+    {{#if color}}text-{{color}}{{/if}}"></span>{{/if}}

From 2a745e7e108156ac0031ea2b63ed6aeb59702aef Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <d.j.yotta@gmail.com>
Date: Wed, 26 Jun 2024 18:48:25 +1200
Subject: [PATCH 11/15] use http_header component instead of disabling
 compression everywhere

---
 .../examples/show-progress/go.sql             |  4 ++++
 .../examples/show-progress/index.sql          |  4 ++++
 .../sqlpage/migrations/01_documentation.sql   | 24 +++++++++----------
 examples/official-site/sqlpage/sqlpage.yaml   |  3 ---
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/examples/official-site/examples/show-progress/go.sql b/examples/official-site/examples/show-progress/go.sql
index 4fe5af94..5510ad09 100644
--- a/examples/official-site/examples/show-progress/go.sql
+++ b/examples/official-site/examples/show-progress/go.sql
@@ -1,3 +1,7 @@
+-- Disable actix-web compression middleware:
+--    https://github.com/actix/actix-web/issues/3410
+SELECT 'http_header' AS component, 'Identity' AS "Content-Encoding";
+
 SELECT 'shell' AS component, 'light' AS theme;
 
 -- can disable the spinner to show only progress bar
diff --git a/examples/official-site/examples/show-progress/index.sql b/examples/official-site/examples/show-progress/index.sql
index 07dbb6d4..94bee5e0 100644
--- a/examples/official-site/examples/show-progress/index.sql
+++ b/examples/official-site/examples/show-progress/index.sql
@@ -1,3 +1,7 @@
+-- Disable actix-web compression middleware:
+--    https://github.com/actix/actix-web/issues/3410
+SELECT 'http_header' AS component, 'Identity' AS "Content-Encoding";
+
 SELECT 'shell' AS component, 'dark' AS theme;
 
 SELECT 'loader-start' AS component,
diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
index c448a8e5..7c359b6a 100644
--- a/examples/official-site/sqlpage/migrations/01_documentation.sql
+++ b/examples/official-site/sqlpage/migrations/01_documentation.sql
@@ -767,7 +767,7 @@ Default is "spinner-border".
 Set to the empty string to disable the spinner - e.g. to display only progress
 updates.
 ', 'TEXT', TRUE, TRUE),
-    ('size', 'Size of the spinner eg. sm, lg', 'TEXT', TRUE, TRUE),
+    ('size', 'Size of the spinner (e.g. sm, lg) [see here](https://tabler.io/docs/components/progress)', 'TEXT', TRUE, TRUE),
     ('color', 'Color of the spinner', 'COLOR', TRUE, TRUE)
 ) x;
 
@@ -779,6 +779,17 @@ Hide the spinner displayed by the loader-start component.
 INSERT INTO component(name, icon, description, introduced_in_version) VALUES
     ('progress', 'time-duration-15', 'Display a progress bar.', '0.25.0');
 
+INSERT INTO parameter(component, name, description_md, type, top_level, optional) SELECT 'progress', * FROM (VALUES
+    -- top-level
+    ('percent', 'Number between 0 and 100.', 'INTEGER', TRUE, TRUE),
+    ('stage', 'A message to display under the progress bar to indicate which stage the process is at.', 'TEXT', TRUE, TRUE),
+    ('color', 'The fill color of the progress bar', 'COLOR', TRUE, TRUE),
+    ('size', 'The size of the progress bar (e.g. sm, lg) [see here](https://tabler.io/docs/components/progress)', 'TEXT', TRUE, TRUE),
+    -- item-level
+    ('percent', 'Number between 0 and 100.', 'INTEGER', FALSE, TRUE),
+    ('stage', 'A message to display under the progress bar to indicate which stage the process is at.', 'TEXT', FALSE, TRUE)
+) x;
+
 INSERT INTO example(component, description, properties) VALUES
     ('loader-start', '
 Will be displayed until [loader-stop](/documentation.sql?component=loader-stop) is selected.
@@ -809,17 +820,6 @@ Source is [here](https://github.com/lovasoa/SQLpage/tree/main/examples/official-
 ', NULL)
 ;
 
-INSERT INTO parameter(component, name, description_md, type, top_level, optional) SELECT 'progress', * FROM (VALUES
-    -- top-level
-    ('percent', 'Number between 0 and 100.', 'INTEGER', TRUE, TRUE),
-    ('stage', 'A message to display under the progress bar to indicate which stage the process is at.', 'TEXT', TRUE, TRUE),
-    ('color', 'The fill color of the progress bar', 'COLOR', TRUE, TRUE),
-    ('size', 'The size of the progress bar [see here](https://tabler.io/docs/components/progress)', 'TEXT', TRUE, TRUE),
-    -- item-level
-    ('percent', 'Number between 0 and 100.', 'INTEGER', FALSE, TRUE),
-    ('stage', 'A message to display under the progress bar to indicate which stage the process is at.', 'TEXT', FALSE, TRUE)
-) x;
-
 INSERT INTO component(name, icon, description) VALUES
     ('shell', 'layout-navbar', 'Personalize the "shell" surrounding your page contents. Used to set properties for the entire page.');
 
diff --git a/examples/official-site/sqlpage/sqlpage.yaml b/examples/official-site/sqlpage/sqlpage.yaml
index 425748ec..4e2b75db 100644
--- a/examples/official-site/sqlpage/sqlpage.yaml
+++ b/examples/official-site/sqlpage/sqlpage.yaml
@@ -3,6 +3,3 @@ database_url: "sqlite::memory:"
 
 # We have a file upload example, and would like to limit the size of the uploaded files 
 max_uploaded_file_size: 256000
-
-# For the show-progress example to work, we have to disable compression
-compress_responses: False
\ No newline at end of file

From d2a38576ec720f4259dfff0e26c88a6c4ebac723 Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <d.j.yotta@gmail.com>
Date: Wed, 26 Jun 2024 18:52:15 +1200
Subject: [PATCH 12/15] remove unnecessary whitespace change

---
 examples/official-site/sqlpage/sqlpage.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/official-site/sqlpage/sqlpage.yaml b/examples/official-site/sqlpage/sqlpage.yaml
index 4e2b75db..d159198d 100644
--- a/examples/official-site/sqlpage/sqlpage.yaml
+++ b/examples/official-site/sqlpage/sqlpage.yaml
@@ -2,4 +2,4 @@
 database_url: "sqlite::memory:"
 
 # We have a file upload example, and would like to limit the size of the uploaded files 
-max_uploaded_file_size: 256000
+max_uploaded_file_size: 256000
\ No newline at end of file

From 23879e0c5c9f83bd147746ac3209cec9e97225bf Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <d.j.yotta@gmail.com>
Date: Wed, 26 Jun 2024 19:14:48 +1200
Subject: [PATCH 13/15] fix styling when errors while loading and simplify css

---
 sqlpage/sqlpage.css                       | 31 ++++++++++++-----------
 sqlpage/templates/loader-start.handlebars |  1 +
 sqlpage/templates/loader-stop.handlebars  |  3 ++-
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/sqlpage/sqlpage.css b/sqlpage/sqlpage.css
index 54bbc865..b8bf6f7e 100644
--- a/sqlpage/sqlpage.css
+++ b/sqlpage/sqlpage.css
@@ -53,7 +53,7 @@ td > p {
 }
 
 /* loader container */
-div.sqlpage-loader-start {
+.sqlpage-loader-container {
   position: fixed;
   text-align: center;
   left: 50vw;
@@ -64,13 +64,19 @@ div.sqlpage-loader-start {
   height: 9em;
   width: 175px;
 }
-div.sqlpage-loader-start:not(:has(+ .sqlpage-loader-stop)) {
-  /* only display if not followed by sqlpage-loader-stop */
-  display: block;
-}
-.sqlpage-loader-start:not(:last-child) {
-  /* firefox doesn't support :has
-     so hide the loader if it is no longer the last element */
+.sqlpage-loader-container:has(.status) {
+  position: inherit;
+  text-align: inherit;
+  left: inherit;
+  top: inherit;
+  margin-top: inherit;
+  margin-left: inherit;
+  padding-bottom: inherit;
+  height: inherit;
+  width: inherit;
+}
+div.sqlpage-loader-start:has(+ .sqlpage-loader-stop) {
+  /* hide if followed by sqlpage-loader-stop */
   display: none;
 }
 /* end loader container */
@@ -79,13 +85,8 @@ div.sqlpage-loader-start:not(:has(+ .sqlpage-loader-stop)) {
 .sqlpage-progress-container {
   margin: 1em 0 1em;
 }
-div.sqlpage-progress-container:not(:has(+ .sqlpage-progress-container)) {
-  /* only display if not followed by sqlpage-progress-container */
-  display: block;
-}
-.sqlpage-progress-container:not(:last-child) {
-  /* firefox doesn't support :has
-     so hide the loader if it is no longer the last element */
+div.sqlpage-progress-container:has(+ .sqlpage-progress-container) {
+  /* hide if followed by sqlpage-progress-container */
   display: none;
 }
 .sqlpage-progress-container label {
diff --git a/sqlpage/templates/loader-start.handlebars b/sqlpage/templates/loader-start.handlebars
index 3538b3ad..1b4ebc55 100644
--- a/sqlpage/templates/loader-start.handlebars
+++ b/sqlpage/templates/loader-start.handlebars
@@ -1,4 +1,5 @@
 <div {{#if id}}id="{{id}}"{{/if}} class="sqlpage-loader-start">
+  <div class="sqlpage-loader-container">
   {{#if spinner}}<span class="{{default spinner "spinner-border"}}
     {{#if size}}spinner-border-{{size}}{{/if}}
     {{#if color}}text-{{color}}{{/if}}"></span>{{/if}}
diff --git a/sqlpage/templates/loader-stop.handlebars b/sqlpage/templates/loader-stop.handlebars
index 791b7b84..d7b5b010 100644
--- a/sqlpage/templates/loader-stop.handlebars
+++ b/sqlpage/templates/loader-stop.handlebars
@@ -1,2 +1,3 @@
+  </div>
 </div>
-<div class="sqlpage-loader-stop" />
+<div class="sqlpage-loader-stop"></div>

From d96525bd2e0e1a849ea08ab81a3c3da49925a54f Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <d.j.yotta@gmail.com>
Date: Wed, 26 Jun 2024 20:07:34 +1200
Subject: [PATCH 14/15] Update loader-start.handlebars

Fix spinner defaults
---
 sqlpage/templates/loader-start.handlebars | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/sqlpage/templates/loader-start.handlebars b/sqlpage/templates/loader-start.handlebars
index 1b4ebc55..84d8873f 100644
--- a/sqlpage/templates/loader-start.handlebars
+++ b/sqlpage/templates/loader-start.handlebars
@@ -1,5 +1,6 @@
 <div {{#if id}}id="{{id}}"{{/if}} class="sqlpage-loader-start">
   <div class="sqlpage-loader-container">
-  {{#if spinner}}<span class="{{default spinner "spinner-border"}}
-    {{#if size}}spinner-border-{{size}}{{/if}}
-    {{#if color}}text-{{color}}{{/if}}"></span>{{/if}}
+    <span class="{{default spinner "spinner-border"}}
+      {{#if size}}spinner-border-{{size}}{{/if}}
+      {{#if color}}text-{{color}}{{/if}}">
+    </span>

From fc916828e5ced84cc18b8433d127890fc3e7b42e Mon Sep 17 00:00:00 2001
From: Daniel Sheffield <d.j.yotta@gmail.com>
Date: Thu, 27 Jun 2024 01:10:53 +1200
Subject: [PATCH 15/15] always show progress bar at top-level component

---
 sqlpage/templates/progress.handlebars | 36 +++++++++++++--------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/sqlpage/templates/progress.handlebars b/sqlpage/templates/progress.handlebars
index 64f83eb7..24214c98 100644
--- a/sqlpage/templates/progress.handlebars
+++ b/sqlpage/templates/progress.handlebars
@@ -1,24 +1,22 @@
-{{#if (or percent stage)}}
-  <div class="sqlpage-progress-container">
-    <div class="progress {{~#if size}} progress-{{size}}{{/if}}">
-      <div
-        id="sqlpage-loading-{{default stage "progress"}}"
-        class="progress-bar
-        {{~#if (not percent)}} progress-bar-indeterminate{{/if}}
-        {{~#if color}} bg-{{color}}{{/if}}"
-        role="progressbar"
-        aria-valuenow="{{percent}}"
-        {{~#if percent}}style="width: {{percent}}%; display: block"{{/if}} 
-        aria-valuemin="0" aria-valuemax="100"
-        {{~#if stage}}aria-label="{{stage}}"{{/if}}>
-      </div>
+<div class="sqlpage-progress-container">
+  <div class="progress {{~#if size}} progress-{{size}}{{/if}}">
+    <div
+      id="sqlpage-loading-{{default stage "progress"}}"
+      class="progress-bar
+      {{~#if (not percent)}} progress-bar-indeterminate{{/if}}
+      {{~#if color}} bg-{{color}}{{/if}}"
+      role="progressbar"
+      aria-valuenow="{{percent}}"
+      {{~#if percent}}style="width: {{percent}}%; display: block"{{/if}} 
+      aria-valuemin="0" aria-valuemax="100"
+      {{~#if stage}}aria-label="{{stage}}"{{/if}}>
     </div>
-    {{~#if stage}}
-      <br>
-      <label for="sqlpage-loading-{{default stage "progress"}}">{{stage}}</label>
-    {{/if}}
   </div>
-{{/if}}
+  {{~#if stage}}
+    <br>
+    <label for="sqlpage-loading-{{default stage "progress"}}">{{stage}}</label>
+  {{/if}}
+</div>
 {{#each_row}}
 {{#if (or percent stage)}}
   <div class="sqlpage-progress-container">