Changing pages causes no css for a second or two. | electronjs.org | Page 1

silent crystal Apr 27, 2024, 5:57 PM

#

Well, I have a theme system that uses multiple css files and then changes the css link element in the html based on what theme the user choses. The theme is stored in a mongoDB. Anyways, changing the theme colour changes instantly but changing pages makes.. the page wouldn't have css for a decent while then it finally loads the correct css file. Now this happens even if the theme hasn't been changed, even happens when you first open the app. I'm using electron vite with electron-builder.

#

renderer.js:

willow briar Apr 27, 2024, 7:52 PM

#

hmm does changeTheme func executes at first open of the app?

silent crystal Apr 28, 2024, 6:11 AM

#

willow briar hmm does changeTheme func executes at first open of the app?

Nah

#

After a sec or 3 so no css for a while

#

Same issue

sly marsh Apr 29, 2024, 4:47 AM

#

Browser need time to load css

#

Its expected behaviour

jovial bramble Apr 29, 2024, 4:49 AM

#

Hi

silent crystal Apr 29, 2024, 8:59 AM

#

sly marsh Browser need time to load css

There is a delay in loading CSS files when I switch pages in my Electron app, even when I haven't changed the theme. It's happening right from when I open the app, and it's really slowing things down. I've tried tweaking things. The way the theme thing works is it checks if there is a css link import and if there isnt then use the css link thing from the database which is the last remembered theme. Remember, this all works but there is a huge delay until it finally sets the new css link import from the database causing the page to be without any css for a very noticable amount of time when switching pages and when opening the app.

sly marsh Apr 29, 2024, 9:05 AM

#

silent crystal There is a delay in loading CSS files when I switch pages in my Electron app, ev...

Ots expected behaviour for dynamic loading css

#

If you dont what it, load css with page in head tag

silent crystal Apr 29, 2024, 9:06 AM

#

sly marsh If you dont what it, load css with page in head tag

but then it would do something like, load green theme first because it's in the header and then after a delay it would finally load purple theme because that's the theme in the database

#

you feel?

sly marsh Apr 29, 2024, 9:12 AM

#

Thats how web work

#

Web servers able to use ssr

#

Or templates like ejs

#

With electron you need to do that manually

silent crystal Apr 29, 2024, 9:19 AM

#

that made no sense at all

#

what is the solution?

sly marsh Apr 29, 2024, 9:21 AM

#

Solution for what?

#

With css load delay?

#

Prepare page with proper css file

#

Or change the logic

#

I dont see any point to have multiple html pages

#

Somewhere in 2000 probably

#

Now you can do everything in one page

silent crystal Apr 29, 2024, 9:26 AM

#

huh????
its like 3 html files what

silent crystal Apr 29, 2024, 9:27 AM

#

sly marsh Now you can do everything in one page

you dont make sense bruh

silent crystal Apr 29, 2024, 9:27 AM

#

sly marsh Prepare page with proper css file

but then there would still be a delay in making it the proper theme from the databse

sly marsh Apr 29, 2024, 9:33 AM

#

silent crystal huh???? its like 3 html files what

You can dynamically change html content and do async background requests

#

With js

sly marsh Apr 29, 2024, 9:34 AM

#

silent crystal but then there would still be a delay in making it the proper theme from the dat...

Then load data from database before page loading

silent crystal Apr 29, 2024, 9:34 AM

#

Go on

sly marsh Apr 29, 2024, 9:35 AM

#

Thats all

silent crystal Apr 29, 2024, 9:36 AM

#

sly marsh Thats all

i need more than that to recode my whole code

sly marsh Apr 29, 2024, 9:37 AM

#

More?

#

You can stop loading css files dynamically

#

And start using classes

#

Its faster then load css from scratch

#

Applying theme from preload

#

But it wont work with multiple pages

silent crystal Apr 29, 2024, 4:57 PM

#

sly marsh But it wont work with multiple pages

who on earth uses one page of html

sly marsh Apr 29, 2024, 4:58 PM

#

silent crystal who on earth uses one page of html

every spa web apps

silent crystal Apr 29, 2024, 4:58 PM

#

sly marsh every spa web apps

what's spa?

sly marsh Apr 29, 2024, 4:59 PM

#

https://en.wikipedia.org/wiki/Single-page_application

Single-page application

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.
In a SPA, a page r...

silent crystal Apr 29, 2024, 5:02 PM

#

sly marsh https://en.wikipedia.org/wiki/Single-page_application

is that hard to do?

#

because that's mad

sly marsh Apr 29, 2024, 5:03 PM

#

hard for whom?

silent crystal Apr 29, 2024, 5:03 PM

#

sly marsh hard for whom?

well im still quite new to electron

sly marsh Apr 29, 2024, 5:03 PM

#

its not electron related

#

its web dev

silent crystal Apr 29, 2024, 5:04 PM

#

but it can be done in electron, right?

sly marsh Apr 29, 2024, 5:04 PM

#

yes

silent crystal Apr 29, 2024, 5:04 PM

#

sly marsh its web dev

does it use any framework>

sly marsh Apr 29, 2024, 5:04 PM

#

in any browser

#

no

silent crystal Apr 29, 2024, 5:04 PM

#

can it be done in html, css, and vanilla js?

sly marsh Apr 29, 2024, 5:04 PM

#

you can

silent crystal Apr 29, 2024, 5:04 PM

#

AYO WHAT, IM DOING THAT

sly marsh Apr 29, 2024, 5:05 PM

#

you doing that when dynamically changing css file

silent crystal Apr 29, 2024, 5:05 PM

#

sly marsh you doing that when dynamically changing css file

wdym?

sly marsh Apr 29, 2024, 5:06 PM

#

dynamically changing web page is spa in some cases

silent crystal Apr 29, 2024, 5:06 PM

#

i would have to watch some vids before i speak

#

thank you so much for sharing this information with me

sly marsh Apr 29, 2024, 5:07 PM

#

you can show login form in same page

#

by changing classes

silent crystal Apr 29, 2024, 5:07 PM

#

i feel like i've been living under a rock

#

is there pro's and con's or just pro's to using a spa?

sly marsh Apr 29, 2024, 5:08 PM

#

vanilla js is harder to manage

silent crystal Apr 29, 2024, 5:08 PM

#

sly marsh vanilla js is harder to manage

only one i really know 😅

sly marsh Apr 29, 2024, 5:09 PM

#

well, you have es imports

#

its simplify it a bit

#

spa usually load longer

#

because spa static js files may use 20-40mb

silent crystal Apr 29, 2024, 5:10 PM

#

oooof

sly marsh Apr 29, 2024, 5:10 PM

#

depends on the app

#

because everything comes from js

#

discord for example

#

is spa application

silent crystal Apr 29, 2024, 5:13 PM

#

sly marsh is spa application

oooo

#

is it too late to change the whole app to be spa?

sly marsh Apr 29, 2024, 5:14 PM

#

i dont know

#

you decide

silent crystal Apr 29, 2024, 5:15 PM

#

sly marsh you decide

well i dont know how long it would take to convert it

#Changing pages causes no css for a second or two.