Show a loading screen page after my splash page or extend splash page

  • 1
  • Question
  • Updated 5 years ago
  • Doesn't Need an Answer
hi.. how can i show a loading screen/page after my splash page or extend the view of my splash page until my app opens? Currently it takes my app almost 20-30 seconds to load after the splash page disappears and turns to a black screen...

Attached is an image of what my config file looks like. any advice or instruction would be great.. i am not a coder, but i can figure things out fairly good. thanks in advance.

Photo of Eyroniq,TaylorElaine

Eyroniq,TaylorElaine

  • 7 Posts
  • 0 Reply Likes
  • not understanding!

Posted 5 years ago

  • 1
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
Photo of Eyroniq,TaylorElaine

Eyroniq,TaylorElaine

  • 7 Posts
  • 0 Reply Likes
Thank you kindly... I will give this a try... I need this to primarily work on Android (and then Apple/IOS later). i will take a look at the demos you have provided.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
My demo works on both Android and iOS. It has comments too.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
The OP wants the splash to hide when the first page is loaded. So, the hide() method should not be called after a certain period of time, but rather upon the documents 'load' event.
Note that this currently doesn't work properly on Android. The plugin author is working on it.
Photo of Eyroniq,TaylorElaine

Eyroniq,TaylorElaine

  • 7 Posts
  • 0 Reply Likes
Hi Petra... thank you for your response... What is OP? And is there a workaround... because I also noticed that when I'm on Wifi and accessing the app it takes about 30 seconds to open (splash to first app page)... and when I'm on my 4G I see the splash but only get a blackscreen thereafter waiting forever-never for my first app page to show... your thoughts?
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Petra, my code works on Android and iOS, and implements timeouts.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
That's correct, Jesse, but I believe you're missing the point here.
The splash should disappear as soon as the index is fully loaded and ready to be displayed. Sometimes, that takes 3 seconds, sometimes 30.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Hi Elaine,
The OP is Original Poster, a common term for the person who started the thread.

If your first page takes that long, you are obviously loading a lot of remote data there. It would be a good idea to see how that can be avoided, for instance by moving some stuff to a next page and/or storing heavy stuff locally in your app.

The idea is to keep the splashscreen visible until the first page is loaded, then dismiss the splash. That can be done by preventing the splash from disappearing automatically after X seconds. Instead, catch the 'load' event on the document of the first page and then call splashscreen.hide() as indicated by Jesse.
However, if your first page takes indeed 30 secs or so before loading is completed, users may think the app is broken and run away before the splash has finally disappeared, so it is essential to have a quickly loading first page.
Photo of Eyroniq,TaylorElaine

Eyroniq,TaylorElaine

  • 7 Posts
  • 0 Reply Likes
Yes... I want to keep the the splash page visible up until that first page app load... OR can there be some type of hourglass or loading bar placed in BETWEEN the SPLASH page and first APP page?

Tell me this: My app pull my current website which is Responsive (not a Mobile website). Maybe it trying to pull my front page is causing the delay?! Since I dont want to change my website from being responsive to a mobile platform, could I possibly point my app's first page to just a login page (which may be lightweight), and (given users need to login anyway to interact with the app).

Thank you for the explanations as well. yes i don't want people to think it is broken... im just having this small issue so far!!!

>>>> That can be done by preventing the splash from disappearing automatically after X seconds. Instead, catch the 'load' event on the document of the first page and then call splashscreen.hide() as indicated by Jesse. <<<< What codin am I to use or add to prevent the disappearance??
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You can prevent the splash from disappearing or at least delay it for a long time with
<preference name="auto-hide-splash-screen" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="30000" />


About your website's first page: yes, you can have a lightweight index.html as your 'front door'.
Photo of Eyroniq,TaylorElaine

Eyroniq,TaylorElaine

  • 7 Posts
  • 0 Reply Likes
@jessie and @petra ... thank you so much for your suggestions and help... so far things are working as desired. I have one more question: Is the screen before the splash page (its a black/gray design with my app name in the header) necessary and/or show up on all apps designed through phonegap??
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
???
There should not be a screen before the splash screen.
Photo of Eyroniq,TaylorElaine

Eyroniq,TaylorElaine

  • 7 Posts
  • 0 Reply Likes
Photo of Eyroniq,TaylorElaine

Eyroniq,TaylorElaine

  • 7 Posts
  • 0 Reply Likes
@petra this is the screen that shows up before my splash page... It may last 1-4 seconds
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I'm sorry, I don't know. I have never seen such screen.
1. On what device are you testing this? Or is it a simulator/emulator?
2. What is the file size of your splash screen? Could it be that this black screen is shown until your device has loaded the splash?