Content
View differences
Updated by Marc Alcobé over 4 years ago
When I load the in app notification center here on the community instance it sometimes takes several seconds before everything is loaded. The issue is that I as a user don't get any cue to stay patient and simply wait for everything to load. I believe we need some kind of loading indiciator (<mention class="mention" data-id="72513" data-type="user" data-text="@Parimal Satyal">@Parimal Satyal</mention> , <mention class="mention" data-id="72512" data-type="user" data-text="@Marc Alcobé">@Marc Alcobé</mention> , <mention class="mention" data-id="3" data-type="user" data-text="@Niels Lindenthal">@Niels Lindenthal</mention> )
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/22087/content"></div></figure>
**Acceptance criteria (see gif below)**
* As long as the notifications in the center are not finsished loading, a loading indicator should be shown
* Main view: Use a skeleton view for loading the notification rows
* The skeleton view should be done with CSS only.
* Split view (right side): Using a micro animation in the illustration of the right split screen
* To be determined: Shall the bell with the loading arrows also be implemented CSS only or with a gif?
**Technical notes**
There are angular components that do this already, such as
* https://github.com/ngneat/content-loader
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/22162/content"></div></figure>
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/22087/content"></div></figure>
**Acceptance criteria (see gif below)**
* As long as the notifications in the center are not finsished loading, a loading indicator should be shown
* Main view: Use a skeleton view for loading the notification rows
* The skeleton view should be done with CSS only.
* Split view (right side): Using a micro animation in the illustration of the right split screen
* To be determined: Shall the bell with the loading arrows also be implemented CSS only or with a gif?
**Technical notes**
There are angular components that do this already, such as
* https://github.com/ngneat/content-loader
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/22162/content"></div></figure>