white screen between screen

[Michael4771079]

Hi,
there are get services on load for most pages in my app. As the page loads the screen displays the colour of the container swatch until the service loads, and then the backround image appears.
I have tried to overcome this white screen with css, but to no avail. this code, I get the image but after the white screen.
The theme is theme roller.

Is there a better way to intergrate the image in the theme in order to avoid this ugly white screen?

Is it possible to cache the data in the get service?
would this avoid the white screen ?

thanks for your help

[Maryna Brodina]

Hello! If it's possible with regard to your app logic move your services from Load to page Show event.

[Michael4771079]

Thanks Maryna,
I assumed Katya regarded the other topic as finnished.

I implemented service to page show, it helps a little but the colour of the container swatch still shows.

With this being a themeoller theme is there no way to point to the image rather that the swatch colour from within the theme?

I thought addind css and a class to the container, the custom css would over ride the theme.

the only other thing I can think of is to save all services in localstorage on app opening and call each service form local on page load or show, would this solve it?

Cheers!

[Maryna Brodina]

[quote:]I thought addind css and a class to the container, the custom css would over ride the theme[/quote] it should overwrite, please try.
[quote:]save all services in localstorage on app opening and call each service form local on page load or show[/quote] you can try if that's ok with regard to your app logic. Please note it would slowdown app opening.
Are you sure there is no white screen without service invocation? If so you can try to invoke services on page show with timeout - it won't affect speed of app work much, but image should be loaded in time.

[Michael4771079]

Hi Maryna,
I tried it, call service on page show. and applied the css and class, the image arrives after the theme swatch, its better, but you can still the swatch colour before the image. I would send a screenshot, but impossible to take.

without a service the image in on the screen as it loads, no swatch colour.
Happy to try time out on page show, How do I implement it?

If I go down the route of calling services and saving a collections in local storage,
will I still be able to populate the grid and map from localstorage?

thx

[Maryna Brodina]

[quote:]If I go down the route of calling services and saving a collections in local storage, will I still be able to populate the grid and map from localstorage?[/quote] sure, you can use service mock mode http://docs.appery.io/documentation/r...
[quote:]Happy to try time out on page show, How do I implement it? [/quote]invoke services not through "Invoke service" action, but using JS presetTimeout(serviceName.execute, 250);/prewhere serviceName - service name
250 - 1/4 sec

[Michael4771079]

Hi Maryna,
I set the js code on page show
setTimeout(charcoalread.execute, 250);

service doesnt show, here is the error in console

thx

[Kateryna Grynko]

Hi Michael,

Try this code please:presetTimeout(function(){charcoalread.execute();}, 250);/pre

[Michael4771079]

Thanks Katya,
thats what I was missing, the service executes now.
But the main problem still exists
the swatch colour of the container shows for a second before the custom css loads the image

code.backgroundImg {

background-position: top center;
background-repeat: no-repeat;
background-image: url('../image/FolderSwitcherBG.jpg');
background-size: cover !important;

} /code

is there a way to over come this?
is it possible to add the image to the css for the themeroller theme?
I thought the custom css would over write the theme?

thx

[Kateryna Grynko]

Michael,

Custom CSS rewrites theme styles. If you want to use an image uploaded as an asset you can access it as files/views/assets/image/name.png
Here name.png is an image name.