Skip to content

Add skeleton loader - In honor of Halloween! 💀 🎃#464

Merged
ullbergm merged 1 commit intomainfrom
spooky-scary-skeletons
Nov 4, 2025
Merged

Add skeleton loader - In honor of Halloween! 💀 🎃#464
ullbergm merged 1 commit intomainfrom
spooky-scary-skeletons

Conversation

@ullbergm
Copy link
Copy Markdown
Owner

@ullbergm ullbergm commented Nov 4, 2025

👻 Spooky Scary Skeletons!

This PR adds a skeleton loader to give users a spook-tacular loading experience - just in time to celebrate Halloween (which was only a few days ago)! 🎃

🦴 What's New

  • Skeleton Loader Component: Shows realistic loading placeholders while fetching applications and bookmarks
  • Theme-Aware: Respects light/dark mode and overlay opacity settings
  • Text-Length Based: Uses actual app names and descriptions to calculate skeleton widths for ultra-realistic sizing
  • Selective Features: Tags appear on 25% of items, status badges on 10% - just like real apps
  • Category Support: Organized by actual categories (Home Automation, Infrastructure, Productivity)
  • Accessibility: Proper ARIA labels and screen reader support

🎃 Implementation Details

Component Architecture:

  • Uses actual Application and ApplicationGroup components with skeleton={true} prop
  • Perfect visual matching because it's the same components, just in "preview mode"
  • Description skeletons render as individual word-like blocks based on real word lengths

Real Mock Data:

// Home Automation (3 apps)
- home assistant, node-red, vacuum

// Infrastructure (9 apps)  
- openshift, emqx, gatus, github repo, gitops, kasten k10, 
  load balancer, synology, unifi

// Productivity (3 apps)
- cyberchef, excalidraw, it-tools

Technical Highlights:

  • Name width: nameLength * 8px (uppercase text)
  • Description: Each word gets wordLength * 6px width
  • Theme detection based on background preferences
  • Respects all layout preferences (showDescription, showTags, showStatus, columnCount, etc.)

🧪 Testing

  • ✅ All 9 SkeletonLoader tests passing
  • ✅ All 354 frontend tests passing
  • ✅ Spotless formatting applied
  • ✅ Production ready (no debug delays)

🎭 Why "Skeleton" Loader?

Because what's Halloween without some friendly skeletons? This loader is here to make sure your users never see a dead page while waiting for data to load. It's a real no-brainer for improving perceived performance!


This PR is dedicated to all the ghosts, ghouls, and skeletons who visited us this past Halloween. May your loading states be ever spooky! 👻💀🎃

Signed-off-by: Magnus Ullberg <magnus@ullberg.us>
@github-actions github-actions Bot added size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. area/frontend Changes made to the frontend and removed size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. labels Nov 4, 2025
@ullbergm ullbergm changed the title 💀 Add skeleton loader - A bone-afide improvement just in time for Halloween! 🎃 Add skeleton loader - Just in time for Halloween! 💀 🎃 Nov 4, 2025
@ullbergm ullbergm changed the title Add skeleton loader - Just in time for Halloween! 💀 🎃 Add skeleton loader - In honor of Halloween! 💀 🎃 Nov 4, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Nov 4, 2025

Test Results - JVM

943 tests  +9   935 ✅ +9   1m 8s ⏱️ -1s
 76 suites +1     8 💤 ±0 
 49 files   ±0     0 ❌ ±0 

Results for commit 58e1a1c. ± Comparison against base commit d01d819.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Nov 4, 2025

Test Results - Native

943 tests  +9   935 ✅ +9   1m 6s ⏱️ ±0s
 76 suites +1     8 💤 ±0 
 49 files   ±0     0 ❌ ±0 

Results for commit 58e1a1c. ± Comparison against base commit d01d819.

@ullbergm ullbergm merged commit 3c77583 into main Nov 4, 2025
10 checks passed
@ullbergm ullbergm deleted the spooky-scary-skeletons branch November 4, 2025 22:19
@github-actions
Copy link
Copy Markdown
Contributor

Pull Request closed and locked due to lack of activity.
If you'd like to build on this closed PR, you can clone it using this method: https://stackoverflow.com/a/14969986
Then open a new PR, referencing this closed PR in your message.

@github-actions github-actions Bot locked and limited conversation to collaborators Nov 12, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area/frontend Changes made to the frontend enhancement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant