#435: show spinner indicating page is loading by djyotta · Pull Request #449 · sqlpage/SQLPage

djyotta · 2024-06-23T21:41:29Z

Closes #435

djyotta · 2024-06-23T22:08:00Z

@lovasoa can you take a look to see if it's ok in principle before I start on documentation?

djyotta · 2024-06-27T10:07:11Z

+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.


I've noticed this whole approach doesn't work inside run_sql for some reason. So I should note that 'loader-start' component should be selected before descending into run_sql.

Yes, run_sql is a function, it returns a single json value all at once, it can't stream its results.

I thought as much but didn't want to assume. It's good to have the clarification.

Fix spinner defaults

81reap · 2026-10-30T01:42:41Z

+<div {{#if id}}id="{{id}}"{{/if}} class="sqlpage-loader-start">
+  <div class="sqlpage-loader-container">
+    <span class="{{default spinner "spinner-border"}}
+      {{#if size}}spinner-border-{{size}}{{/if}}
+      {{#if color}}text-{{color}}{{/if}}">
+    </span>


errors between loader-start and loader-stop show up in the spinner's box

Yeah, I knew about this one. I didn't even begin to think about how to solve that... lol, just make sure it doesn't error.

I think you can fix it by closing the <div>. something like

<div {{#if id}}id="{{id}}"{{/if}} class="sqlpage-loader" role="status"> <span class="{{default spinner "spinner-border"}} {{#if color}}text-{{color}}{{/if}}"></span> </div>

I could be forgetting, but I thought the whole hack here was leaving the div open so the spinner disappears when it's closed... My CSS evolved over time though, and it looks as though closing the div should work.

I just recall leaving it open was important for some reason.

It's closed in the sqlpage-loader-stop element.

81reap · 2026-10-30T01:43:54Z

+      {{~#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}}


SELECT 'progress' AS component, 0 AS percent renders progress-bar-indeterminate because of an improper null check

81reap · 2026-10-30T01:45:28Z

+  {{~#if stage}}
+    <br>
+    <label for="sqlpage-loading-{{default stage "progress"}}">{{stage}}</label>
+  {{/if}}


labels don't work on divs iirc

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label

81reap · 2026-10-30T01:46:46Z

+-- Disable actix-web compression middleware:
+--    https://github.com/actix/actix-web/issues/3410
+SELECT 'http_header' AS component, 'Identity' AS "Content-Encoding";
+


do we need this still? actix/actix-web#341 is closed

It's not immediately obvious to me how actix/actix-web#341 is related.

ope, sorry missed a 0 at the end

actix/actix-web#3410

I implemented this not as a work around for some buffering issue, but because I have some legitimately long running queries so the spinner helps indicate something is happening.

sure, but its fixed upstream now. I think the better approach would be to update the actix-web dependency and use the upstream fix :)

I misunderstood your comment at the first. My bad.

nw, thanks for the PR, excited to see the next revision :)
please re-request review when ready

lovasoa · 2026-10-30T20:55:37Z

I switched the pr to draft, @djyotta feel free to switch it back when ready

datadog-official · 2026-10-30T21:08:35Z

❌ Errors

Your PR has failed checks. Please review the issues below and take necessary action before merging.

🚦 2 Pipeline jobs failed

CI | CI gate — 🔧 Needs a code fix, caused by this PR

View more details · View in GitHub Actions

Compilation and linting errors occurred, causing the job to fail with exit code 1.

CI | compile_and_lint — 🔧 Needs a code fix, caused by this PR

View more details · View in GitHub Actions

TypeScript compilation error in test.ts: TS2835: Relative import paths need explicit file extensions when '--moduleResolution' is 'node16'. Did you mean '../../fixture.js'?

📋 Copy fix prompt

CI on my pull request is failing. Help me find and fix the root cause of each failing job below — they were flagged as caused by changes in this PR, so focus on the diff. For each job, explain the failure and propose a fix.

Before you start, set up the Datadog software-delivery tooling so you can
query the CI data yourself:

1. Check whether you already have the Datadog software-delivery MCP tools
   (e.g. a `search_datadog_ci_pipeline_events` tool) and the `unblock-pr` skill.
2. If either is missing, STOP and ask me for permission before installing
   anything. Do not install or run anything until I have said yes.
3. Only with my explicit approval, set up the Datadog software-delivery MCP
   server and skills by following:
     https://docs.datadoghq.com/getting_started/software_delivery_mcp_tools/
   then restart so the skill is picked up.
4. If I decline, skip all of the above and work from the context below alone.

Then run /unblock-pr — it will pull the CI data itself. The job context below is what we already know.

If /unblock-pr is not available — because I declined the setup above, or it did not install — work from the context below instead.

Datadog has already classified this failure as caused by changes in this PR.
Take that as given and work the fix:

1. Locate the change. Diff this branch against its base and find the change
   that produces this error. Explain the mechanism, don't just name a file:
     git fetch origin && git diff $(git merge-base origin/main HEAD)...HEAD
2. Reproduce it locally. Run the failing job's command or test before
   proposing anything.
3. Propose the smallest fix that addresses the root cause — not a workaround,
   not a broadened assertion, not a disabled or skipped test.
4. Re-run the same command to confirm, and say exactly what you ran.
5. If the failure turns out to be intermittent rather than deterministic, say
   so plainly instead of "fixing" it — that is a flaky test, and patching it
   hides the problem.

If the right move is to re-run the job rather than change code, use the job
link in the context below. For GitHub Actions: `gh run rerun <run-id> --failed`,
where the run ID is the number after `/runs/` in that URL (not the trailing
number, which is the job ID).

Branch: daniel/435-spinner-to-indicate-page-is-loading

CI | CI gate
Commit: 5045a4f322b89c850a52e97306549a2c22bea787
Error (code / build):
Compilation and linting errors occurred, causing the job to fail with exit code 1.
CI job: https://github.com/sqlpage/SQLPage/actions/runs/41126977264/job/124313807413

CI | compile_and_lint
Commit: 5045a4f322b89c850a52e97306549a2c22bea787
Error (code / build):
TypeScript compilation error in test.ts: TS2835: Relative import paths need explicit file extensions when '--moduleResolution' is 'node16'. Did you mean '../../fixture.js'?
CI job: https://github.com/sqlpage/SQLPage/actions/runs/41126977264/job/124307959377

Useful? React with 👍 / 👎

_{This comment will be updated automatically if new data arrives.

🔗 Commit SHA: 5045a4f | Docs | View more details | Give us feedback!}

djyotta marked this pull request as draft June 23, 2024 21:42

djyotta commented Jun 26, 2024

View reviewed changes

Comment thread examples/official-site/sqlpage/sqlpage.yaml Resolved

djyotta marked this pull request as ready for review June 26, 2024 05:24

djyotta commented Jun 27, 2024

View reviewed changes

Daniel Sheffield and others added 15 commits September 27, 2026 06:38

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

b014b29

center the spinner

8d88bd1

use tabler spinner by default

2f86194

fix whitespace

2679ec4

add example of progress on it's own

b63c35b

fix whitespace

5a7379d

add example of loader without spinner

b909159

fix whitespace

63627f5

no spinner if not specified

c054445

improve top-level params of spinner component and add documentation

ec4707c

use http_header component instead of disabling compression everywhere

f6e4729

fix styling when errors while loading and simplify css

416240b

Update loader-start.handlebars

ed03b1e

Fix spinner defaults

always show progress bar at top-level component

0a680b4

Validate loader and progress components on current frontend

0bd66fb

lovasoa force-pushed the daniel/435-spinner-to-indicate-page-is-loading branch from 1c3024a to 0bd66fb Compare September 27, 2026 06:49

81reap requested changes Oct 30, 2026

View reviewed changes

81reap added the waiting for response label Oct 30, 2026

81reap self-assigned this Oct 30, 2026

Merge branch 'main' into daniel/435-spinner-to-indicate-page-is-loading

5045a4f

lovasoa marked this pull request as draft October 30, 2026 20:55

Conversation

djyotta commented Jun 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

djyotta commented Jun 23, 2024

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

djyotta Oct 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

djyotta Oct 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lovasoa commented Oct 30, 2026

Uh oh!

datadog-official Bot commented Oct 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Errors

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

djyotta commented Jun 23, 2024 •

edited

Loading

djyotta Oct 30, 2026 •

edited

Loading

djyotta Oct 30, 2026 •

edited

Loading

datadog-official Bot commented Oct 30, 2026 •

edited

Loading