Local Storage on Page Load is PAIN

  • paspom-1336668536084500503

    Pascal

    3 days 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.
  • erikbeus-1336668854981623859

    Erik Beuschau

    3 days ago

    Could you perhaps use a cookie instead? You can read cookies during SSR
  • paspom-1336694830847496287

    Pascal

    3 days 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
  • erikbeus-1336718734772928532

    Erik Beuschau

    3 days ago

    I believe there’s a set cookie action? @Max didn’t you use a cookie for dark/light mode at some point? πŸ€”
  • max.kayr-1336721169063088281

    Max

    3 days ago

    Yes, we use a cookie for that. But we created a custom action πŸ™‚
  • lucasg-1336725643269898271

    Lucas G

    3 days 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
  • paspom-1336803868687864020

    Pascal

    3 days ago

    @Max @Lucas G Can you share such an action? πŸ™‚
  • lucasg-1336805117311193169

    Lucas G

    3 days ago

    document.cookie = cookie;
  • where cookie is a string with data
  • paspom-1336818649415155754

    Pascal

    3 days 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
  • lucasg-1336819948470927410

    Lucas G

    3 days 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
  • lucasg-1336820557861097573

    Lucas G

    3 days 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
  • paspom-1337107211838554132

    Pascal

    2 days ago

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

    But it still gets the flashing 😿
  • paspom-1337108966135566346

    Pascal

    2 days 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.kayr-1337121190942212106

    Max

    2 days ago

    SSR light/dark works as expected when you use cookies. What does your setup look like?
  • paspom-1337311539455201314

    Pascal

    1 day ago

  • paspom-1337312866201636875

    Pascal

    1 day ago

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

    Pascal

    1 day 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.kayr-1337315220703674392

    Max

    1 day 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
    1337315220691095563-image.png
  • paspom-1337316590840053790

    Pascal

    1 day ago

    hahaha wow omg
  • !!! amazing
  • paspom-1337316938111782982

    Pascal

    1 day ago

    Thank you Max, thats a game changer!
  • paspom-1337317247324258324

    Pascal

    1 day ago

    Makes so much sense...
    What an amazing feature
    πŸ™Œ1
  • max.kayr-1337317580788203571

    Max

    1 day ago

    No Problemo 😊
    ⭐1
  • uunicode-1337517598065295363

    unicodes

    1 day 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.
  • paspom-1337522970494505030

    Pascal

    1 day 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
  • lucasg-1337523915752214609

    Lucas G

    1 day ago

    Supabase 😬
  • πŸ˜‚
  • How long do Xano calls take?
  • paspom-1337525138257608804

    Pascal

    1 day 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
  • paspom-1337525300443222157

    Pascal

    1 day 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.
  • lucasg-1337528804553527418

    Lucas G

    1 day 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
  • paspom-1337530281887924295

    Pascal

    1 day 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
  • lucasg-1337531003819786260

    Lucas G

    1 day 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
  • lucasg-1337531530032971776

    Lucas G

    1 day ago

    Dependencies, extensions, tests, etc. There's a lot of things devs want in an IDE
  • paspom-1337531967721308171

    Pascal

    1 day ago

    Yeah, its a different human nature, these guys
  • lucasg-1337532024952590388

    Lucas G

    1 day 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
  • paspom-1337532206104580208

    Pascal

    1 day 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.
  • lucasg-1337532539916517548

    Lucas G

    1 day ago

    server-ness?
  • Tod-1337532541351231608

    Tod

    1 day ago

    Great energy @Lucas G! Your continuous contribution to the toddle Community just made you advance to Community Level 37!
  • paspom-1337532649685909506

    Pascal

    1 day 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
  • lucasg-1337532887721054319

    Lucas G

    1 day 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
  • lucasg-1337533276063268985

    Lucas G

    1 day 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
  • paspom-1337533442673475706

    Pascal

    1 day ago

    Oh yeah thats right, but the edge function are, arent they?
  • sanedealer-1337534673722802186

    Edwin Paul

    1 day 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 πŸ‘€
  • lucasg-1337534760326795314

    Lucas G

    1 day ago

    I believe they are serverless, yes. I do not use them personally
  • lucasg-1337534983748718672

    Lucas G

    1 day ago

    Yes, when you enable 'Proxy' in toddle it goes through their servers
  • toddle runs on Cloudflare
  • sanedealer-1337535154977112165

    Edwin Paul

    1 day ago

    No i mean i ran the traceroute through my terminal. No toddle involved
  • lucasg-1337535620813426801

    Lucas G

    1 day 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
  • sanedealer-1337536040600076290

    Edwin Paul

    1 day ago

    Does proxying through toddle allow better routing? i can't tell. Cloudflare routing for me is not very reliable these days.
  • lucasg-1337536435095470100

    Lucas G

    1 day ago

    Right now toddle cannot control that afaik

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code β€” but accessible to your entire team!

Try toddle β€” it's free!

Β© Copyright 2024 toddle. All rights reserved.