Webview on a dark app always showing white background until content loaded

I’m using webview components on some of my pages. I’ve made a soft nav on the bottom of the page and filled the rest with a webview. As you can see in the video linked below, when I change pages the non-webview part of the page is properly using the app background colors but the webview is always a white background. This is a distracting flash of white on every page change now that the app has gone into a dark design. I’ve tried everything I can see but nothing works. Am I just out of luck? Is there any way to modify a component for my own use? I’m open to anything at this point.

You can see as I click on Auctions the webview is only set to half the page so that half is white while the rest of the page is dark until the content fills in. On upcoming the entire page is a webview and it’s a bit of a slow loader so it’s a much more obvious problem.

I feel like the easiest solution is to add a black “loading screen” on top of your Web View as it loads. Not ideal by any means but it would hide the white background. You could try and figure out the average time it takes for your website to load and then dismiss the loading page after that amount of time. The black screen would go away and your loaded webpage would be underneath it. I’m having trouble finding a slow loading webpage to test with though haha.

If we had the ability to create our own components you might could have a trigger for when the webpage finishes loading and dismiss the black loading view then.

I was really hoping that trigger thing was what you were going to explain. I’ve tried changing the opacity until load which works for android but not for IOS. I’m still hoping someone might think of something to help me here.

I can do things in non-appgyver space like lazy load the page content with ajax or something but that sounds finicky. What I really want is for Appgyver to give a background color on a webview component but who knows how long that’s going to take. I’ve gone into production with this app so I’m sort of gotta dance with the one that brung me.

Yeah, I wish I had something better for you. I’ve only been using AppGyver for about a month so I definitely don’t know all of the tricks yet. Hopefully someone else can chime in!

I know they’re working on the third-party plugin support which would probably allow you to do what you need, but who knows when that will be done. I’ll keep messing around with it though and let you know if I come across a better solution. Not being able to add our own code or components definitely limits us in development when it comes to customization.

:thinking:

I’ve done some changes to WebView recently that will come into effect with 4.2.X – I haven’t tested background color with it, but I’ll test it when the time comes and add it to my notes to add if it doesn’t. However the changes do include e.g. an event for when the WebView has finished loading, which would enable you to show something covering the WebView in the meanwhile that would not be based on a guess of how long it would need to be there.

1 Like

I can’t wait, the webview event thing is -perfect-! Thanks for the response. Now I know what I’m looking forward to :slight_smile:

1 Like