Create loading state component

[LeoSilvaGomes]

Description

With the connection with the atlas API, we need to make the user experience enjoyable, so should be necessary to create a loading state component as a fallback screen when the API is loading.

Expectation

• Create a modal showing a generic loading
  • the map should be showing in the background
  • should show feedback loading animation

Warning

The atlas API is not connected yet with the front, instead to wait for this moment, was decided to develop the component to complement that behavior when it would be ready.

Checklist

• [ ] Propose a screen loading, commented on this task (figma example)
• [ ] Approved proposed screen
• [ ] Create the loading state component
• [ ] Create PR about the task

[LucasGlopes]

@LeoSilvaGomes , I made this example in Figma for the Loading Component. Could you give it a look?

[LeoSilvaGomes]

@LeoSilvaGomes , I made this example in Figma for the Loading Component. Could you give it a look?

I think we can go with a more simple component

• smaller
• with white theme (the base of our modals and side bar is white)

I really think, isn't necessary the word loading too :D @AnaBeatrizPontes give your opinion here please.

Please, add your reference in the comment too, I think it's always good to see your way to think.

[LucasGlopes]

@LeoSilvaGomes ,thanks for the feedback. Here's the updated version.

[AnaBeatrizPontes]

@LeoSilvaGomes ,thanks for the feedback. Here's the updated version.

I think the uploaded version is better but still not smoothier for the atlas front. Maybe we can try to smooth the component by decreasing the white part or maybe even removing it since the map will only turn green when loading and consequently the loading component will disappear so this will not disturb the loading component visualization.

@LeoSilvaGomes what do you think?

[LeoSilvaGomes]

I agree with @AnaBeatrizPontes I think you can follow the examples by this link https://dribbble.com/tags/loading_state and I have two more tips

• Make more than one example (When you are working with design it always good give more than one example)
• Trying to find some library or reference!

And one adjustment is the size of component, I think this can be really smaller! WDT? please let me know

[LucasGlopes]

Thanks again for the feedbacks, @LeoSilvaGomes and @AnaBeatrizPontes .Based on the tips and examples you provided and studying the React Material UI Library (Circular Progress Component), I came up with three more examples that could work for the atlas front.

[LeoSilvaGomes]

Loved the second one, with the gray background, WDT @AnaBeatrizPontes

[AnaBeatrizPontes]

I think the second one is perfect to. Nice job 😄

[LucasGlopes]

Thanks, guys. I'll move forward with the second one, then.