Best Practice for Loading Feedback when content or media is loaded


Hello together,
I do some research and found many different ways to show the app-User a loading screen so he has some feedback when content is loading. Especially when the user is connected to a mobile data network and not to wifi.

But at the moment I am not really sure, which one is the right solution for me. I will shortly describe the scenario, it is only important when the user is not connected to wifi.

What I like to do:
I am developing an app where the user can play videos and audios. So there is a html-template with a mediaplayer (I use videogular) and some overview-templates with list-items.

When the user comes to the mediaplayer-page there should be a loading indicator for the media-player. The problem is, that the page is loaded a bit slow, therefore the user sees how the media-player is loading its elements.

Round one:
I first added the $ionicLoading, but there is the same effect, because it triggers with my http-Request, and when the request is done, the whole player-conten isn’t fully loaded. The player also has an background-image with a videogular-plugin (vg-poster). So the user can see how the image is build step by step.

Round two:
After that I used a trick from the forum here. With ng-show and the ionic viewevents (enter, beforeEnter,…) I am using a scope-variable for triggering when the view has fully entered. That works… not so good, but for sure really good.
But that solution needs some CSS-Fixes, like overlaying divs and stuff. And also it is handled different on iOS and Android… which is much work for testing.

The question
Ok, so far so good. My question is, is there any better way? Or some best-practise to do what I want? Feels like I am doing a quick & dirty solution and therefore I am interested in some more suggestions. :slight_smile:

Thank so far