All topics

Local Storage on Page Load is PAIN

Pascal

3 months ago

I'm repeatedly trying to build a dark/light mode, and the only reliable way is to do it with fomula based colors and a local storage based dark/light mode
Query Parameters and URL parameters did not reliably work at all.
however, the page really builds only after the first 1 second, until all formulas seem to be unpacked and the local storage is read.
I guess this is due to toddles core engine.
In the video, darkmode is per default "true" and a potential lightmode will be read from the local storage
This causes the flashing in the first second.
Erik Beuschau

3 months ago

Could you perhaps use a cookie instead? You can read cookies during SSR
Pascal

3 months ago

Interesting!
How do I save a custom cookie?
right now we can not name them.
I tried a custom script but this did not work
Erik Beuschau

3 months ago

I believe there’s a set cookie action? @Max didn’t you use a cookie for dark/light mode at some point? 🤔
@Erik Beuschau
I believe there’s a set cookie action? @Max didn’t you use a cookie for dark/light mode at some point? 🤔
Max

3 months ago

Yes, we use a cookie for that. But we created a custom action 🙂
Lucas G

3 months ago

I was going to make this a suggestion a while back 😅 allow for set cookies action to take in a label value to set other types of cookies
👍1
Or an action to set non httponly cookies
Right now, we set them via custom actions
Pascal

3 months ago

@Max @Lucas G Can you share such an action? 🙂
Lucas G

3 months ago

document.cookie = cookie;
where cookie is a string with data
@Lucas G
document.cookie = cookie;
Pascal

3 months ago

I tried this and that cookie gets deleted after page reload.
Claude tells me this is characteristic of Session-Cookies, but a http-only cookie would be needed, which is plausible imo, to interact serverside
Lucas G

3 months ago

By default they only last for the session so they shouldn't get deleted on a page reload
You can also give them an expiry
Lucas G

3 months ago

So even non httpOnly cookies can stick around beyond their regular session span but losing them on page reload is weird. Haven't seen that
Pascal

3 months ago

It works now!
I tried to save a boolean as a cookie, which was against the rules.

But it still gets the flashing 😿
Pascal

3 months ago

SSR does not seem to work in this case
I hope you simply keep improving the first milliseconds when the general toddle runtime evolves.
It's not the end of the world.
Max

3 months ago

SSR light/dark works as expected when you use cookies. What does your setup look like?
Pascal

3 months ago

https://toddle.dev/projects/pascal_darkmode_test
Pascal

3 months ago

if you mind, take a look around – the core_app manages the cookie storing and loading, distributing the darkmode to the style components.
Pascal

3 months ago

The flashing happens only tangibly in the case of background/color transitions, but this demonstrates it is not ssr, or respectively processed after page load initialization
Max

3 months ago

It flashes because you set the mode "On load". "On load" always executes client-side. You need to make the cookie the default value of your darkmode variable
Pascal

3 months ago

hahaha wow omg
!!! amazing
Pascal

3 months ago

Thank you Max, thats a game changer!
Pascal

3 months ago

Makes so much sense...
What an amazing feature
🙌1
Max

3 months ago

No Problemo 😊
⭐1
unicodes

3 months ago

I would add this into a table in the database under user preferences since you need the username, avatar, etc. I store important decisions like dark mode in a database table. This would improve the experience if the user switches browsers (depending on your app). It provides continuity without forcing the user to find the dark mode toggle again. Plus, by delivering dark mode from the server, you eliminate flashes, ensuring a smoother experience.
@unicodes
I would add this into a table in the database under user preferences since you need the username, avatar, etc. I store important decisions like dark mode in a database table. This would improve the experience if the user switches browsers (depending on your app). It provides continuity without forcing the user to find the dark mode toggle again. Plus, by delivering dark mode from the server, you eliminate flashes, ensuring a smoother experience.
Pascal

3 months ago

thats a good suggestion! Thank you!
I'm a bit on a war path with SSR api calls because I'm using Xano, which appears to tank the page load time...
Still looking for a solution to get a better handle on ssr api calls
🔥1
🚀1
🔥1
🚀1
Lucas G

3 months ago

Supabase 😬
😂
How long do Xano calls take?
Pascal

3 months ago

Generally about 200 - 400 ms depending on payload and processing. It adds up. And whatever is going on on the toddle cloudfront edge makes things quite hair-tearing
@Lucas G
Supabase 😬
Pascal

3 months ago

Well, if there were not the edge functions having to be coded like its 1990
I really wish there was something better, or xano becomes a little bit more edgy.
Lucas G

3 months ago

Idk, not everything can be no code. Just like toddle or figma can't possibly have every CSS propery in a UI
Supabase is also not a no-code platform so there's that lol
Pascal

3 months ago

I have no problem with coding, I fully embrace "low-code"
but its outlandish to me that a cloud based software requires you to set up a local environment and "deploy" your codebase
Even chatgpt has with canvas now a online IDE
I cant wrap my head around that tbh
Sure, 99% of everything else is way way more oldschool but online IDE's are obvious as the bright day light to me
And then total morons like me can get a shot, because I capitulated 5 times learning and getting a nice flow with edge functions
Lucas G

3 months ago

lol I think it's because users ask for local first development a lot of the times
Online IDE's don't yet compare to local
Lucas G

3 months ago

Dependencies, extensions, tests, etc. There's a lot of things devs want in an IDE
Pascal

3 months ago

Yeah, its a different human nature, these guys
Lucas G

3 months ago

It is a lot more worthwhile for supabase to focus on infrastructure and other higher priority features than to develop a full fleshed IDE
@Lucas G
It is a lot more worthwhile for supabase to focus on infrastructure and other higher priority features than to develop a full fleshed IDE
Pascal

3 months ago

well, they have one of the most gorgeous UI's for literallly anything else
but besides of the speed, due to its server-ness, xano as a whole is truly beautiful.
Lucas G

3 months ago

server-ness?
Tod

3 months ago

Great energy @Lucas G! Your continuous contribution to the toddle Community just made you advance to Community Level 37!
Pascal

3 months ago

or edge-less
haha depends on how you turn it
I have my server in Frankfurt, approx. 100km from me away. Dont want to know the apeed of it in the US xD
Lucas G

3 months ago

That one I don't get as much tbh
Having a server is great if you're the one that owns and completely controls its config. Otherwise, I don't see the benefit
Lucas G

3 months ago

As long as you can set cost caps for "serverless" stuff then it's fine. Though supabase isn't serverless
It has US/EU locations
Pascal

3 months ago

Oh yeah thats right, but the edge function are, arent they?
Edwin Paul

3 months ago

A bit off topic, but Supabase seems to be proxying the project URL through Cloudlfare which sometimes adds more latency. I did a traceroute xyz.supabase.co to confirm this 👀
@Pascal
Oh yeah thats right, but the edge function are, arent they?
Lucas G

3 months ago

I believe they are serverless, yes. I do not use them personally
@Edwin Paul
A bit off topic, but Supabase seems to be proxying the project URL through Cloudlfare which sometimes adds more latency. I did a traceroute xyz.supabase.co to confirm this 👀
Lucas G

3 months ago

Yes, when you enable 'Proxy' in toddle it goes through their servers
toddle runs on Cloudflare
Edwin Paul

3 months ago

No i mean i ran the traceroute through my terminal. No toddle involved
Lucas G

3 months ago

Not too surprising I guess since Cloudflare runs a huge amount of DNS traffic but I would have thought they use route 53 since they use AWS
Though DNS is more complex than that lol
Edwin Paul

3 months ago

Does proxying through toddle allow better routing? i can't tell. Cloudflare routing for me is not very reliable these days.
Lucas G

3 months ago

Right now toddle cannot control that afaik

Local Storage on Page Load is PAIN

Pascal

Erik Beuschau

Pascal

Erik Beuschau

Max

Lucas G

Pascal

Lucas G

Pascal

Lucas G

Lucas G

Pascal

Pascal

Max

Pascal

Pascal

Pascal

Max

Pascal

Pascal

Pascal

Max

unicodes

Pascal

Lucas G

Pascal

Pascal

Lucas G

Pascal

Lucas G

Lucas G

Pascal

Lucas G

Pascal

Lucas G

Tod

Pascal

Lucas G

Lucas G

Pascal

Edwin Paul

Lucas G

Lucas G

Edwin Paul

Lucas G

Edwin Paul

Lucas G