'Loading'-state designs

[faffydee]

As discussed with @kingflurkel and @xardass, we want a clean solution to show some sort of 'loading-state' when certain pages (or specific components on page) aren't loaded instantly. Specifically targeted for this is page /detail/ and page /hashtag/.

Solution:

For items that might need longer loading we use a visually simplification to show for as long as the component and its data is not loaded in:

• page /detail/: The component that takes the most time to load is the detail itself, not the display-my-info, not the hashtag... So we use a simplified version of the detail to put on the place the actual detail will be seen when it's loaded in.

/detail/ - mobile:

/detail/ - desktop:

2 small interactive elements will be in the loading-state (of /detail/):

• a cancel-btn (same as on actual detail): to use when the loading doesn't complete (=something went wrong)
• loading dots: these indicate that the page is still loading, so the user doesn't get confused

---

• page /hashtag/: The components that takes the most time to load are the list of involved items, the list of open requests and the filter. So we combine those and show a simplified version. Display-my-info

/hashtag/ - mobile:

/hashtag/ - desktop:

2 small interactive elements will be in the loading-state (in /hashtag/):

• a back-btn (same as on actual /hashtag/-page): to use when the loading doesn't complete (=something went wrong)
• loading dots: these indicate that the page is still loading, so the user doesn't get confused

[faffydee]

Done, on branch #766_loading-states-design. But not mergeable yet, code still to be discussed with @xardass

[faffydee]

Done, adapted by Xardas in his own branch.