[Meta] Making GitLab Real Time

With the implementation of #5983 (closed) (uses Vue.js) by @selfup GitLab is starting to better reflect the current situation. That issue will take care of updating the pipeline list and pipeline graph's in real time. This is a meta issue to organize our efforts in making sure GitLab is consistently real time throughout the application, making sure we don't confuse users whether a view updates itself yes or no.

The result of this effort would create a living environment which consistently informs our users correctly. We will have to gauge wether some things are worth making real time and how this will effect UX. GitLab is like no other and has this incredible potential, let's make that a reality.

Technique/Implementation

I have heard rumors about pub sub and other techniques (Periodic polling with increasing delay when there's nothing new) in order for us to make this possible. Has there been decided on a stable implementation in order for this all to be possible which is future proof as well? @jschatz1

If decided let's update this issue body with information on this.

Handling cached views

I have seen various issues about this already. If a page/element is considered real time, will it make sure it reflects the current situation accurately even if the user has decided to go back to previous page, loading a cached version of it?

Important to get this down correctly and consistently throughout the application! Put information here

UX and Micro animations

Real time can have a lot of impact on the UX side of things. We will have to see if we provide enough feedback to the user. And if we don't do things which may negatively impact a users ability to act upon information (moving things off screen to quickly as new updates are rendered on top of them being one example).

Feedback can come in various formats, one of those being micro animations. Letting an application feel alive will be enhanced by this and can in most cases probably done by css alone. Micro animations should in no way draw too much attention, merely inform (like all other information). On top of that, performance should never be impacted by this.

Important to get this down correctly and consistently throughout the application! Create a guide upon this topic here

General rule: Old element should just disappear with no animation, and the new elements should have a quick fade in. Nothing more. reference

Plan

Some pages will have a higher priority then others to be real time, this issue body should be adjusted to reflect that.

PS: I was busy fleshing this out completely with elements and example images, but it takes too much time, if necessary I will do so.

The idea is that we keep oversight in this issue and create issues from this list to be acted upon.

Personal Navigation

Project wide navigation

Project Views

Detail views

[ ] To be added.

The reach of this issue is enormous (although we will have to see exactly which scope we want this to be... Probable ~moonshots issue.