Minimal Progress Loading

Did you think about minimal and in-context progress loading? I did. When user click on something, and net response is slow, what should happen ideally? Browser native behaviour is to show some progress animation in tab header. But we can do it better.

For example, Github shows similar animation right next the link, therefore user eyes does not have to travel across whole screen (to browser tab header) to check if something is wrong.

Este Minimal Progress Loading UI Pattern

1. Show progress loading animation as close as possible the position of click/tap, after 1 sec of waiting. No need to show anything before.
2. For link, use animated ellipsis or underline. For example like that.
3. For action, do something with borders or background to mimic temporally disabled state, which should prevents user to click again until current action is done. For example like that.

You can check it at songary.jit.su, but only with super slow connection. Yes, I developed this technique staying at place with broken router :-)

The last question. How the hell I can project pending loading/whatever state into app user interface?

Use React.js, to project app state into browser DOM super easily. So we have to only project pending states into app state. We can, because every Este app action is dispatcher method. And este.Actions is storing pending actions automatically. Then we can use actions.isPending in login button, for example. For links, we can use Este React link. Pending class is added automatically.

As result, code is elegant and DRY and UX is good.

Update 1

I should note that this technique is useful for pessimistic UI. For optimistic UI, you can process link or button immediately, and complete action as soon as possible. If connection isn’t available, put action into local queue. You can also mix both techniques. For example, use optimistic UI for client changes and pessimistic UI for fetching from server.