Hi, in my app, iam getting data for my homePage form a few providers - RecordService,SettingService ect… Iam directly accessing properties from injected services in homePage template, and i display them. For the case that they are not already loaded, iam using elvis operator. Data in providers are loaded form sqli database.
Problem is, when i start app, home page shows, but without data. Data shows up after for example 1s. I would like to show Homepage only after initial data is loaded, so user sees fully loaded Page from beginning. Any ideas how to synchronize it? I know one solution is to hide splashscreen after some timeout, but this not seems like a very clean and reliable solution. I would like to hook splashcreen hide better. Any ideas? How do u solve this in your apps? Or are u preffering other way of accessing data from providers?
I had a sorta similar situation where I check the user login, and if logged in, set the root to a tabs page which loads data.
With the normal splash behaviour you could see the transition from the start-up tutorial to the tabs page, and wait for the data to load.
So what I did to resolve it was use the ionic-native/splashscreen plugin and call splashscreen.hide() on the tabs page only after all the data was loaded and ready to display.
I use observables returning data from a rest API, and in the subscribe handler I check that it’s been loaded and then hide the splash screen.
This means the splash screen stays open a little longer, but it’s less than a second so doesn’t impact on the experience.
I had some hassles with the splash config getting this to work, so I’ve pasted my config.xml splashscreen settings below as well.
@gemcomputers I like your idea alot, but its different from phone to phone with the loading times.
@Vartex05 What I would do in your case test how long the loading times are. If they arent long you should use @gemcomputers method. Else you should display your data different like.
You open the app splashscreen appears. Your Page layout loads instantly and then you put the information in, with a fade in animation.
As example: (Look at the first with the checkbox. You just have to automate it ofc.)
Name: John Doe
Age: 25
Birthday: etc…
I usually solve these loading problems with a “playfull” way for the customer.
yeh the load times vary by device. The idea is to set the splash screen time to 10seconds or some value that will make sure it shows for a long time, then you programatically hide it when you decide your app is ready (data loaded etc).
I actually have 2 other data sources that may still be loading when I hide the splash screen.
The data is shown in tiles using a custom component, so what I do is I manually add one tile with a loading spinner, like a placeholder, that shows until the rest api data comes back. This is hooked up using an observable subscribe event, so it’s quite a seamless process.
Use promises to handle async and get the data from your providers
Make sure the page starts with a loadingconttroller (or sone other Wait… message page) that stays at least a few seconds or until the promises are resolved
Chain the promises or use Promise.all to handle them with one final then code to load the final screen
Don’t do this. Instead, use Observables with the startWith operator. For example, suppose you are loading an image. You startWith(imagePlaceholder) where imagePlaceholder is in your assets file, or a dataURI that you import as a string constant. imagePlaceholder is for example the Twitter Egg, which gets overwritten once the real data arrives.
Or use a similar approach with Promises as suggested by the poster above. But the elvis operator encourages lazy code, where you don’t know what’s happening until everything is done. You want total control over what the page displays at all stages.
