1

When i reload my page, my toggle-buttons which are hidded by making opacity-0 appears on flash.

Is there any way to stop these flashes from appearing on reload and keep the (opacity-0) items hidden as intended?
Live Site URL
Codebase-Github Repo

//loads user preference after reload based on user's previous session
window.onload = () => {
  "toggle1" == localStorage.getItem("clicked")
    ? (toggleHide("toggle1"), theme1())
    : "toggle2" == localStorage.getItem("clicked")
    ? (toggleHide("toggle2"), theme2())
    : "toggle3" == localStorage.getItem("clicked")
    ? (toggleHide("toggle3"), theme3())
    : console.log("infinity");
};
Mohammad Mustak Absar Khan
  • 234
  • 1
  • 11

1 Answers1

2

One solution is to make all three themes hidden by default and onload method, you decide which theme you want to show, and by default, if there no clicked item in the localStorage show the first theme, and this will prevent flashing.

window.onload = () => {
  "toggle1" == localStorage.getItem("clicked")
    ? (toggleHide("toggle1"), theme1())
    : "toggle2" == localStorage.getItem("clicked")
    ? (toggleHide("toggle2"), theme2())
    : "toggle3" == localStorage.getItem("clicked")
    ? (toggleHide("toggle3"), theme3())
    : (toggleHide("toggle1"), theme1())
};
Mina
  • 14,386
  • 3
  • 13
  • 26
  • This idea works. But to have it working for me, i did this little change to the code. I have added this extra portion to the last line. `: ((activeButton = "toggle1"), toggleHide("toggle1"), theme1());` – Mohammad Mustak Absar Khan Oct 27 '22 at 05:03