x-cloak is blinking in v3 #1554
-
|
After update to Alpine v3 x-cloak started blinkin. See an attached examples for this issue. I use: With x-cloak Without x-cloak |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 5 replies
-
|
How and where did you define The "best practice" in V2 was to place it as high up in the <style>[x-cloak] { display: none!important }</style> |
Beta Was this translation helpful? Give feedback.
-
|
Yes, it is exactly in the <style>[x-cloak] { display: none!important }</style> |
Beta Was this translation helpful? Give feedback.
-
|
A similar problem #1561 |
Beta Was this translation helpful? Give feedback.
-
|
I doubt this is related to x-cloak because by the time you click the edit button, page would’ve initialized and it would’ve nuked it off elements so shouldn’t come into play. Can you try 3.0.7 of alpine, there was change to way class bindings were happening for objects that might be in play but hard to know without seeing code. |
Beta Was this translation helpful? Give feedback.
-
|
On 3.0.8 same issue. |
Beta Was this translation helpful? Give feedback.
-
|
Interesting, I think I have a guess why this is happening. The new x-cloak implementation waits until the next tick of the browser to "remove" the x-cloak attribute from an element. This is so that the entire chunk of DOM has a chance to finish initializing before x-cloak is removed and it's revealed. I think the reason you're seeing a blip is this: Livewire is updating the template from the server and re-adding x-cloak to an element, then when it gets picked up on the front-end and initialized, it gets re-removed, but after a tick, so you see a quick blip. After thinking about this, there is no need to wait for a full tick to remove x-cloak. I have PRd and merged a change to remove the tick wait: #1570 Please test this in v3.0.9 and verify it's fixed - thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Yes, in v3.0.9 it's fixed! |
Beta Was this translation helpful? Give feedback.
-
|
Awesome! Can you mark this as answered please |
Beta Was this translation helpful? Give feedback.
Interesting, I think I have a guess why this is happening.
The new x-cloak implementation waits until the next tick of the browser to "remove" the x-cloak attribute from an element.
This is so that the entire chunk of DOM has a chance to finish initializing before x-cloak is removed and it's revealed.
I think the reason you're seeing a blip is this: Livewire is updating the template from the server and re-adding x-cloak to an element, then when it gets picked up on the front-end and initialized, it gets re-removed, but after a tick, so you see a quick blip.
After thinking about this, there is no need to wait for a full tick to remove x-cloak. I have PRd and merged a change to remove the t…