I’m have an issue where buttons and links jitter on state change (when clicking on the “Sign Out” button). I tried both v-if and v-show and the jitter persists.
Video of the issue: https://www.veed.io/view/89672f51-f55c-411c-883f-440b02cfa4de?panel=share
<div>
<div>
<button @click="setColorTheme()">
<IconDarkMode />
</button>
<div v-if="!signedIn && !pending">
<NuxtLink to="/sign-in">
<span>Sign In</span>
<IconSignIn />
</NuxtLink>
</div>
</div>
<div
v-if="signedIn && !pending">
<NuxtLink to="/profile">
<span>Profile</span>
<IconProfile />
</NuxtLink>
<button to="/sign-in" @click="signOut">
<span>Sign Out</span>
<IconSignOut />
</button>
</div>
</div>
I also have a 300ms delay for signedIn
state in signOut function to wait until page transition ends, but jitter still persists.
if (res.ok) {
const data = await res.json();
state.successMessage = data.message;
if (route.path === '/') {
window.location.reload();
} else {
window.location.href = '/';
}
setTimeout(() => {
state.signedIn = data.signedIn;
}, 300);
}
Looking for a possible solution.