[PLUGIN] - Short List Skeleton Loader

Showcase Plugins
1

Hi,

Quick post to demo a Short List skeleton loader for mobile.

Plugin
https://bubble.io/plugin/short-list-skeleton-loader-1784314175487x802336520241414100

Editor Link
The editor link along with the instructions/documentation, can be seen through the link below. Please note this is a native plugin so you won’t be able to view it directly through the browser, you’ll need to use the BubbleGo app once it’s installed.

https://bubble.io/page?id=paul-testing-4&app_type=mobile&tab=Design&name=Home

What it does

  • Shows an animated skeleton over your Short List while it’s loading, and clears it automatically the instant your real rows appear on screen.
  • The placeholder rows automatically match your list’s row height, columns, spacing, and corner radius, so it looks right with no fiddling.
  • Seven animation styles — Shimmer, Pulse, Wave, Diagonal, Breathe, Glow, and Cascade — with customisable colours.
  • Works on both iOS and Android.

Important: it’s not drag-and-drop You trigger the skeleton with a “Show skeleton loader” action in your workflow, placed before you load your data, and it hides itself once the rows appear.

For a Short List inside a Sheet:

  1. Do when Sheet 1 is visible
  2. Show skeleton loader (the action)
  3. Add a pause - 500 ms or higher
  4. Display list in a short list or selectable list - pass your data

Have the plugin element to the page, give your Short List an ID Attribute, and point the element’s Target ID at it. The same “show first, load second, short pause between” pattern works for lists placed directly on the page too. Full setup, including page and direct data source workflows, is in the documentation.

Requirements

  • For the native mobile Short List element.
  • The “Show skeleton loader” action must run before your data loads (with a short pause between).
  • Built for the Short List specifically.

Hope there’s some use for it.

Paul

1 Like