sqlpage#435: WIP - show spinner indicating page is loading

Author: Daniel Sheffield

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.

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;

examples/show-progress/sqlpage/sqlpage.yml

@@ -0,0 +1,3 @@
+allow_exec: True
+compress_responses: False
+database_url: "sqlite://:memory:"

sqlpage/sqlpage.css

@@ -50,4 +50,67 @@ td > p {
 .datagrid {
   --tblr-datagrid-padding: 1.25rem;
   --tblr-datagrid-item-width: 12rem;
-}
+}
+
+/* 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: "...";
+}

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>

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>

sqlpage/templates/spinner-stop.handlebars

@@ -0,0 +1,2 @@
+</div>
+<div class="sqlpage-spinner-stop" />