Animation widget initial state gives wrong feeling

[cmongut]

What is happening? When the animation widget is loading the data it says "No data available", giving the feeling that something wrong has happened when it's not true.

What should happen? It should give the feeling that the widget is loading the data.

Steps to Reproduce We can see it when running the following CARTOframes example: https://github.com/CartoDB/cartoframes/blob/develop/examples/06_advanced/visualize-temperatures.ipynb

cc @CartoDB/rt-managers

[cmongut]

We'd like to prioritize this ticket for the CARTOframes release and also because we are starting to show CARTOframes maps in blog posts. Thank you 😇

cc @rt-managers

[kukukaka]

FYI, @urbanphes @ilbambino

[urbanphes]

@cmongut On Builder when we had a widget (e.g. histogram) on the loading state, it would appear a border-top blue with an animation from the left to right side and also a grey boxes that are simulated the histogram blocks.

This is an example:

In this way, the users knew that the information was being loaded in that block.

To test this, on any Builder map is appreciated when this is loaded: E.g. https://team.carto.com/u/urbanphes/builder/74dff673-ee41-4747-920c-74cf46983799/embed

---

For CARTOframes we can use the same idea, and test it.

[cmongut]

Love it!

[alejandraarri]

I guess the idea is to generate loading states for all Airship widgets, right? The placeholders that are in both Dashboard and Builder widgets are HTML and CSS code and the same would be done for Airship. Keep in mind that this will take some development time, although it is not a problem to finish it for the release.

Another option is to include a generic loading state that can be applied to all widgets. In that case, the design team would have to specify how it would look like.

@cmongut, what solution do you prefer to develop?

[cmongut]

@alejandraarri thank you very much for the insights. It's really lovable to add suggestions about giving the same value to users with easier solutions. :top:

I would go for the loading state option. I think there is already a loading icon somewhere but I agree the design team should provide the way to go. Something like a text + the loading icon could work: "Loading data..." + the loading icon

@urbanphes, what do you think? Can we provide a loading state easier to develop?

[urbanphes]

Hey @cmongut and @alejandraarri

I've some comments before start to create something new:

1. As a first option and if it's possible to develop on time, I would try to make this loading states as we have on Builder. This way we have the same patterns for the loading states in our products.

2. As the 2nd option, if we couldn't develop, I would try to replicate the same design that we have but with less development. For instance, using a gif simulated the blue top bar.

What do you think?

[cmongut]

I would test option 2 to see if it's enough to understand that the component is in a loading state.

[jesusbotella]

Hi!

I can set the animated blue top bar, but what about the content placeholder? I guess that if we put the blue bar but the content still says that NO DATA AVAILABLE wouldn't make sense.

Do you want me to try and develop the placeholder bars? Or anything simpler?

[urbanphes]

Hey!

@cmongut as a first part, the message NO DATA AVAILABLE it shouldn't appear. We try to show a loading state and that message is confused to the users.

@jesusbotella it could be possible to use an image for the placeholder bars? In that case, I can proportionate the image.

[cmongut]

@urbanphes the issue is that there are different widgets that show the same strange message. If it's possible to show an image as a placeholder, we should provide three of them:

• Category widget

• Histogram widget

• Time series widget

[urbanphes]

Hey, @cmongut instead make 3 cases, I would do only 2: Histogram and Category.

I’ve prepared in a sketch document the mockups taken into account the possible backgrounds.

@jesusbotella this is the file, and if you need something tell me.

[cmongut]

Nice alternative :)

Let's use the histogram placeholder for histogram and time-series widgets.

[jesusbotella]

@urbanphes that looks really good! Thank you

[jesusbotella]

Here's what I came up with so far for the category loading:

I was wondering if given that our category widget renders the title above the percentage bar, we should put the thick bar above the other one to match the style.

[jesusbotella]

We've just released this.

Here's how it looks:

[cmongut]

😍

[urbanphes]

I'm sorry I couldn't see it with you, @jesusbotella. The work is amazing 👏