LibreKAT/Ocideck
LibreKAT/Ocideck
Watch
4
0
Fork
You've already forked Ocideck
 0
Code Issues 3 Pull requests 1 Projects Releases 4 Packages Activity Actions 1

feat(web): een laadscherm, zodat de eerste tien seconden niet wit zijn (#589) #704

Merged
brenno merged 1 commit from feat/web-laadindicator-589 into main 2026-07-22 22:39:54 +00:00
Conversation 0 Commits 1 Files changed 3 +133
brenno commented 2026-07-22 22:39:35 +00:00
Owner
Copy link

Werkt aan #589 — de helft die in de repo thuishoort. Het issue blijft open voor de deploy.

Het laadscherm

De webbouw was de eerste ~10 seconden wit: CanvasKit verft pas na een seconde of tien, en tot dan stond er niets. Voor een bezoeker die dit product voor het eerst in zijn browser opent is dat het moment waarop hij "stuk" concludeert en wegklikt — bij een gereedschap waarvan de hele waarde is dat het iets laat zien.

Nu ligt er een laadscherm in web/index.html: logo, "OciDeck", "Laden… · Loading…".

Geen JavaScript, en dat is de kern. Het CSP van de pagina staat geen inline script toe (script-src 'self' 'wasm-unsafe-eval'), dus een los .js-bestand erbij om een div te verwijderen zou meer bewegende delen zijn dan de taak vraagt. Het laagje ligt eronder (z-index: -1) en wordt bedekt zodra Flutter verft — het hoeft dus nooit opgeruimd te worden. Bijvangst: komt Flutter nooit, dan blijft er iets staan dat uitlegt wat je ziet, wat beter is dan wit.

De test bewaakt wat make check-web niet ziet (die draait alleen bij een volledige bouw): dat het laadscherm er is, en dat het geen inline script draagt — dat zou de CSP schenden en dan doet het laadscherm stil niets. Plus dat de afbeelding uit de bundel zelf komt.

Wat er niet in zit

De twee andere punten uit het issue, want ze vragen een deploy die ik niet kan doen:

  1. de webdemo herbouwen en herdeployen — de uitgeleverde build op ocideck.librekat.nl loopt achter op de CSP in de repo (jouw 48-regel-diff). make build-web maakt de nieuwe bundel; het deployen ervan is jouw hand op de server;
  2. de link onder de openingsalinea van de README — die hoort pas te landen als de demo herbouwd én de laadindicator live is, anders wijs je bezoekers naar de oude, tragere, wit-flitsende build. Zodra jij hebt gedeployd is het één regel; zeg het en ik zet hem erbij.

Het issue blijft open tot de demo opnieuw uitstaat.

Poort

make check groen (niet door tail gepijpt).

Werkt aan #589 — de helft die in de repo thuishoort. **Het issue blijft open** voor de deploy. ## Het laadscherm De webbouw was de eerste ~10 seconden wit: CanvasKit verft pas na een seconde of tien, en tot dan stond er niets. Voor een bezoeker die dit product voor het eerst in zijn browser opent is dat het moment waarop hij "stuk" concludeert en wegklikt — bij een gereedschap waarvan de hele waarde is dat het iets laat zien. Nu ligt er een laadscherm in `web/index.html`: logo, "OciDeck", "Laden… · Loading…". **Geen JavaScript, en dat is de kern.** Het CSP van de pagina staat geen inline script toe (`script-src 'self' 'wasm-unsafe-eval'`), dus een los .js-bestand erbij om een div te verwijderen zou meer bewegende delen zijn dan de taak vraagt. Het laagje ligt eronder (`z-index: -1`) en wordt bedekt zodra Flutter verft — het hoeft dus nooit opgeruimd te worden. Bijvangst: komt Flutter nooit, dan blijft er iets staan dat uitlegt wat je ziet, wat beter is dan wit. **De test bewaakt wat `make check-web` niet ziet** (die draait alleen bij een volledige bouw): dat het laadscherm er is, en dat het geen inline script draagt — dat zou de CSP schenden en dan doet het laadscherm stil niets. Plus dat de afbeelding uit de bundel zelf komt. ## Wat er niet in zit De twee andere punten uit het issue, want ze vragen een deploy die ik niet kan doen: 1. **de webdemo herbouwen en herdeployen** — de uitgeleverde build op `ocideck.librekat.nl` loopt achter op de CSP in de repo (jouw 48-regel-diff). `make build-web` maakt de nieuwe bundel; het deployen ervan is jouw hand op de server; 2. **de link onder de openingsalinea van de README** — die hoort pas te landen als de demo herbouwd én de laadindicator live is, anders wijs je bezoekers naar de oude, tragere, wit-flitsende build. Zodra jij hebt gedeployd is het één regel; zeg het en ik zet hem erbij. Het issue blijft open tot de demo opnieuw uitstaat. ## Poort `make check` groen (niet door `tail` gepijpt).
feat(web): een laadscherm, zodat de eerste tien seconden niet wit zijn (#589)
Some checks failed
CI / Gate (Linux) · Format · Analyze · Coverage (pull_request) Failing after 22s
Details
CI / Docs links (pull_request) Failing after 24s
Details
CI / Web hardening (pull_request) Failing after 27s
Details
CI / Supply-chain (Trivy · advisory) (pull_request) Failing after 21s
Details
CI / Gate (Linux) · Format · Analyze · Coverage (push) Failing after 25s
Details
CI / Web hardening (push) Failing after 25s
Details
CI / Docs links (push) Failing after 25s
Details
CI / Supply-chain (Trivy · advisory) (push) Failing after 24s
Details
CI / Test (macos-latest) (pull_request) Has been cancelled
Details
CI / Test (windows-latest) (pull_request) Has been cancelled
Details
CI / Test (macos-latest) (push) Has been cancelled
Details
CI / Test (windows-latest) (push) Has been cancelled
Details
7ffddc7b3b 
De webbouw is CanvasKit en verft pas na een seconde of tien. Tot dan stond
er niets — geen logo, geen "even geduld". Voor een bezoeker die dit
product voor het eerst in zijn browser opent is dat het moment waarop hij
concludeert dat het stuk is, precies bij een gereedschap waarvan de hele
waarde is dat het iets toont.

Er ligt nu een laadscherm in `web/index.html`: logo, "OciDeck", en
"Laden… · Loading…". Twee dingen maken het meer dan een plaatje:

- **geen JavaScript, en dat is de kern, niet een besparing.** Het CSP van
  de pagina staat geen inline script toe (`script-src 'self'
  'wasm-unsafe-eval'`), dus een los .js-bestand erbij om een div te
  verwijderen zou meer bewegende delen zijn dan de taak vraagt. Het laagje
  ligt eronder (`z-index: -1`) en wordt bedekt zodra Flutter verft — het
  hoeft dus nooit opgeruimd te worden;
- **en als Flutter nooit komt, blijft er iets staan dat uitlegt wat je
  ziet.** Dat is beter dan wit, dat "stuk" zegt.

De test bewaakt de twee dingen die `make check-web` niet ziet, want die
draait alleen bij een volledige bouw: dat het laadscherm er is, en dat het
geen inline script draagt — dat zou de CSP schenden en dan doet het
laadscherm stil niets.

Wat hier niet in zit is de andere helft van het issue: de webdemo
herbouwen en herdeployen, en de link eronder in de README. Dat vraagt een
deploy die ik niet kan doen; het issue blijft daarvoor open.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
brenno merged commit f688dcea90 into main 2026-07-22 22:39:54 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
accepted
Assessed and will be built

  
bug
Something is broken

  
declined
Assessed and will not be built

  
docs
Documentation only

  
duplicate
Already tracked elsewhere

  
enhancement
New feature or improvement request

  
good first issue
Small, self-contained, and a good place to start

  
in-progress
Someone is working on this right now. Do not start it in parallel.

  
needs-info
Waiting for the reporter

  
privacy
Personal data can leak. Handled before anything else.

  
security
A weakness someone could use. Handled before anything else.

  
triage
Awaiting assessment

No labels
accepted
bug
declined
docs
duplicate
enhancement
good first issue
in-progress
needs-info
privacy
security
triage
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
LibreKAT/Ocideck!704
No description provided.