Content flashing

Miles · 2024-09-13T10:17:11.615+00:00

Hi guys, Does anyone have a solution to eliminate content flashing. Ideally not covering the element with a div, then removing that div. For context, I have a log in and create account button that I only want to show if the user is logged out. I have the logic for this that says after the auth request has completed and failed, show the element. However, if the user is logged in, when the page loads and the auth request is taking place, the content shows for a split second (flashes). Any ideas? TIA

Miles
1 year ago
Hi guys,

Does anyone have a solution to eliminate content flashing. Ideally not covering the element with a div, then removing that div.

For context, I have a log in and create account button that I only want to show if the user is logged out. I have the logic for this that says after the auth request has completed and failed, show the element. However, if the user is logged in, when the page loads and the auth request is taking place, the content shows for a split second (flashes).

Any ideas?

TIA 🙂
Stockton
1 year ago
If you add “default to: false” in your show/hide formula, would that help?
Stockton
1 year ago
Oh are you trying to use a css property instead of the native show/hide?
Miles
1 year ago
I've tried different methods to solve this (Show, Classes, and Style attributes). This is a formula to set a style attribute if the auth success failed (I want to display the log in buttons). Whats interesting is that it seems to be adding this style attribute by default, and removing it if auth-success = true. Rather than adding it if auth-success=false. This seems to be the same for Show and Classes from what I can see hence causing the flashing. Team toddle Are you able to help with this content flashing issue? How should this be solved?
@Stockton
Oh are you trying to use a css property instead of the native show/hide?
Miles
1 year ago
I've tried Classes, Style attributes, and the Show feature. All result in the content flash
@Stockton
If you add “default to: false” in your show/hide formula, would that help?
Miles
1 year ago
I think the problem is that the function only runs after the element is rendered, hence the flash, but for some reason the function is overriding the default (for example display:none;)
Erik Beuschau
1 year ago
All pages in toddle are both server+client rendered. If you want to treat something differently during SSR, I suggest you use the Is Server formula.
If you're looking to do a server-side redirect to protect your authenticated page, you will need to wait (a bit) for APIs v2 that we're working on atm 🤞
@Erik Beuschau
All pages in toddle are both server+client rendered. If you want to treat something differently during SSR, I suggest you use the Is Server formula.
If you're looking to do a server-side redirect to protect your authenticated page, you will need to wait (a bit) for APIs v2 that we're working on atm 🤞
Miles
1 year ago
I just want to show/hide this depending on if the user is authed or not.
Stockton
1 year ago
Use the native show/hide and in your formula add a default to node with a value of false.
Miles
1 year ago
The problem is whatever method I use to try and do this, it flashes (if the user is logged in) then hides as it should.
Erik Beuschau
1 year ago
I see. If your API call for checking whether the user is authenticated is added to your page directly (not in a component), it will run during SSR actually, and you might be able to avoid the flash.
@Stockton
Use the native show/hide and in your formula add a default to node with a value of false.
Miles
1 year ago
you mean like this? It won't default to false, only to something other than false or null
@Erik Beuschau
I see. If your API call for checking whether the user is authenticated is added to your page directly (not in a component), it will run during SSR actually, and you might be able to avoid the flash.
Miles
1 year ago
it runs in an auth component. There is some logic in there that is needed on all pages so adding the API request to each page individually would be a pain.
Tod
1 year ago
Great energy @Miles! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
@Miles
you mean like this? It won't default to false, only to something other than false or null
Stockton
1 year ago
Remove the if block
@Miles
it runs in an auth component. There is some logic in there that is needed on all pages so adding the API request to each page individually would be a pain.
Erik Beuschau
1 year ago
In a few weeks we will have APIs v2 where it's possible to control per API request if it should run during SSR or not. So it will be possible to run all API requests server side if needed. Let me know if you want to have early access when we open up for it
@Stockton
Remove the if block
Miles
1 year ago
the default value for the auth-success is "". See here:
Stockton
1 year ago
Oh well we need Boolean values lol “” is truthy. So your if statement could be if “” then false else true.
@Stockton
Oh well we need Boolean values lol “” is truthy. So your if statement could be if “” then false else true.
Miles
1 year ago
if its false it wont default to false:
Miles
1 year ago
@Erik Beuschau am I missing something here? This seems like a very simple and commen thing to solve. Even if I set the default style to display: none; then set a formula to add a class of "show" that has a style if display: flex; it seems to default to display: flex; then removes the "show" class if the formula is false? rather than adding it if its true. Is this correct?
@Miles
if its false it wont default to false:
Stockton
1 year ago
Null is falsy and would hide the element.

The hard part for you is not SSR the api. This will come in V2.
@Stockton
Null is falsy and would hide the element.

The hard part for you is not SSR the api. This will come in V2.
Miles
1 year ago
maybe this is what I'm not understanding. I don't understand why the element is not hidden by default, and only changed when the formula is true?
Stockton
1 year ago
Sorry not at my computer at the moment. Can show examples in a bit
🙏1
There’s a few reasons
@Miles
maybe this is what I'm not understanding. I don't understand why the element is not hidden by default, and only changed when the formula is true?
Lucas G
1 year ago
For testing, give the attribute a value of false
You do not need all those other nodes
When the component is used elsewhere, if the value is left blank it will be treated as null
So all you need is the attribute node going into a default to false node
@Lucas G
For testing, give the attribute a value of false
Miles
1 year ago
still flashes
@Miles
the default value for the auth-success is "". See here:
Lucas G
1 year ago
This one was correct
@Lucas G
This one was correct
Miles
1 year ago
but it still flashes before it evaluates to false.
Lucas G
1 year ago
What data is going into it?
Lucas G
1 year ago
If any data at all is being fed into it then it'll count as a truthy value
You may have missed Erik's suggestion
APIs ran in a component are client-side
On page they are server side
At least until APIs v2 comes out where we'll have more options to dictate what is server/client side
Since this call is in a component, everythign is being calculated when the site loads meaning you'll see flashing
Miles
1 year ago
OK, I will disable the API call in the component and add it to the page to see if it works 👍
Stockton
1 year ago
And make sure auto fetch is on.
👍1
Miles
1 year ago
This didnt help. log in buttons still flash for logged in users
Stockton
1 year ago
Can I take a look in the project?

@toddler
@Stockton
Can I take a look in the project?

@toddler
Miles
1 year ago
Sure, how do I share?>
Lucas G
1 year ago
Can just send editor URL
Miles
1 year ago
https://editor.nordcraft.com/projects/roce/branches/start/components/HomePage?leftpanel=design&canvas-width=1302&canvas-height=828.4&rightpanel=style
Miles
1 year ago
you can login with test@test.com and password
👀1
to see the flash
Stockton
1 year ago
It's because you're passing in the entire API object to the child component.

The API object contains data but also is loading and error

Because this object has data it's always truthy. So the default is truthy and then you're hiding things.
Stockton
1 year ago
So in the child component, your attribute is always truthy. Regardless of the api data or errors.

(because you're just looking at the object)
Miles
1 year ago
should I set a variable first with a default value of null, then use the variable value to set the attribute?
Miles
1 year ago
Cool. looks like its fixed 🙂
Tod
1 year ago
Great energy @Miles! Your continuous contribution to the toddle Community just made you advance to Community Level 3!
Miles
1 year ago
using this formula:
and create a new variable just for success/fail :
Thanks @Stockton 🙏
@Miles
using this formula:
Miles
1 year ago
realised I don't need the if statement here 🙂
Stockton
1 year ago
Sweet! Glad you got it 🥳
🙏1
@Erik Beuschau
In a few weeks we will have APIs v2 where it's possible to control per API request if it should run during SSR or not. So it will be possible to run all API requests server side if needed. Let me know if you want to have early access when we open up for it
Miles
1 year ago
Yes please 🙏😀
✅1

Content flashing

Miles

Stockton

Stockton

Miles

Miles

Miles

Erik Beuschau

Miles

Stockton

Miles

Erik Beuschau

Miles

Miles

Tod

Stockton

Erik Beuschau

Miles

Stockton

Miles

Miles

Stockton

Miles

Stockton

Lucas G

Miles

Lucas G

Miles

Lucas G

Lucas G

Miles

Stockton

Miles

Stockton

Miles

Lucas G

Miles

Miles

Stockton

Stockton

Miles

Miles

Tod

Miles

Miles

Stockton

Miles