#15 Replacing SpinnerDialog with something unobstrusive
Closed by amitosh. Opened by amitosh.

Currently, we use a Spinner Dialog to show that content loading from a remote source. However, the Spinner Dialog is a bit obtrusive. It covers the entire viewport. Not to mention it looks entirely out of place (style not consistent with the rest of the app.)

I think, a better solution would be to use a spinner animation, which is more consistent with the design guidelines.

Screenshot_2018-03-13-01-38-35-765_com.fedoraqa.fedora.png


I think I see what you mean here. But just to clarify, instead of having a dialog with a spinner inside of it (the obstructive grey box with the green spinner) you just want the spinner animation by itself?

@amitosh It would be nice if you can add a screenshot of the problem.

thelittlewonder commented

Can we do a fedora logo shaped loader? This is a quick prototype I came up with

loadergif.gif

Code: https://codepen.io/thelittlewonder/pen/zWvWEr

Metadata Update from @a2batic:
- Issue tagged with: UX

@thelittlewonder, its nice, but I feel it will take lot of screen space and wouldnt solve the problem @amitosh has brought up. Thought ?

thelittlewonder commented

@a2batic Yeah that makes sense, sorry my bad. Should we try for something similar to FB Lite? Like instead of an overlay, a progress loader at the top/bottom of the screen.

loader.gif

@a2batic @amitosh an iteration for the loader.

The ask cards can then fall down instantly as soon as the loading is done. Kind of work with gravity too. Makes the interaction more human and also bouncy.

@wildflower the design is pretty :) But,
1.it was decided in previous discussions that we are using tabs. now once you have selected a tab having an animation that recreates the tabs won't be good. moreover can we can have something that related to fedora?
2.moreover here you are using balls, but actually we will have app icons which won't look consistent wile falling down.
3. we have five tabs and have to come up with those icons . enclosing the icons in circles will make them smaller which is a problem too.

After going through the comments, and issue #1 the whole point is to reduce the cognitive load on the users. If we are upfront showing so many tabs (which exceeds iOS and android guidelines), we are simply creating load on the users. Preferable we should only show trending articles or social updates, with a banner space on top for commercial or ad-hoc purposes. Rest can be handled through a hamberger. You can view a detailed landing analysis on #27 .

Just my POV.

This is just a dummy interaction. We will personalise this with the current UI guidelines in the end ofcourse.

The main point here is to avoid full page loaders so that we can allow the user to interact with the app while we continue to perform the loading activity in the background.

My idea is to opt for something minimal like https://ionicframework.com/docs/api/components/refresher/Refresher/

This will be apparent when we start storing posts and notifications in the offline storage

@wildflower, I like the design idea, also, I feel it goes with the @amitosh thought:-

The main point here is to avoid full page loaders so that we can allow the user to interact with the app while we continue to perform the loading activity in the background.

We can definitely personalize the design after the final design.

@a2batic surely!

Please keep in mind of the technical limitations of Ionic/HTML/CSS before suggesting designs.

A designer's dream is a developers nightmare

Metadata Update from @a2batic:
- Issue assigned to thelittlewonder

PR #62 brings offline support, which has got rid of the spinner dialog.

[ ]: In-app browser

Metadata Update from @amitosh:
- Issue status updated to: Closed (was: Open)

Metadata