Dash Loading Shimmer

Dash Python
,
1

The people have spoken and the people love things to shimmer. I put together a little extension of the dcc.Loading component that replicates the fairly popular pre-loading shimmer effect used in today’s web and mobile apps. This is a great way to show the shape of elements on the page as they are loading, which apparently makes users feel more engaged with the app and excited about waiting for your slow code to run :wink:

Check it out on GitHub or in the live (and somewhat sad) Dash app pictured above

Feel free to try it out yourself with pip install dash-loading-extras and make any slow loading component shimmer

from dash import Dash, html, dcc
import dash_loading_extras as loading
app = Dash()

app.layout = html.Div([
    html.H1("A Long Loading Graph Lies Below"),
    html.H2("It's worth the wait!"),
    loading.Shimmer(
        dcc.Graph(figure=fig, id="graph"),
        app=app,
        # show_spinner=True # optionally keep the loading animation on top of the shimmering element
    ),
])

Open to new ideas / collaborators / help prioritising next steps on GitHub

7 Likes
2

Hey @wolfmansideburns - welcome back! :slight_smile:

This is cool! And I like that you can customize it too:
(From your README.me in github)

If you want to tweak the CSS used, inject your own CSS before Shimmer gets there with the shimmer_css function. Common styles to tweak are the opacity, hue, and speed of the shimmer

import dash_loading_extras as loading
app = Dash()

loading.ASSETSDIR = "path/to/your/cssassets/folder"
loading.shimmer_css(app=app, path="my_better_shimmer.css")

app.layout = ...
3 Likes
3

hi Luca @wolfmansideburns ,
Thank you for posting about Dash Loading Shimmer. When I saw the component on GitHub last week, I knew the community would really appreciate it. I just added this post to the growing list of community components index. Thank you again.

2 Likes
4

That looks really nice! On the topic of extending dcc.Loading, my wish list for a library extension would be,

  • Option to change the loading animation when the Dash app is loading (right now it’s just text), I am currently doing that via CSS
  • Enable semi-transparent loading spinners (a bit similar to what you are doing, but I have used it a lot with full screen spinners also, again via custom CSS)
  • Add a debounce option, i.e. don’t show the spinner unless the operation takes more than X seconds (to avoid flickering)
2 Likes
5

Great thoughts here! I believe the delay options are available with the Days Bootstrap Components dbc.Spinner. I was waffling back and forth between the two for the best way to implement this but it was slightly easier to extend the DCC component than the bootstrap alternative.

Also sounds like all the CSS pieces could leverage the CSS injector that powers the shimmer components. Injecting CSS at runtime/dynamically is 90% of the problem and the shimmer_css function should be able to get you started.