Flash of Unstyled Content

[pixel-dust-dev]

I'm using this to encrypt a Hugo made static site.

I get a consistent FOUC when navigating through the site pages.

Are there any proposed solutions to this?

[pixel-dust-dev]

I ended up solving the issue by modifying the password_template.html as follows:

      function decryptAndReplace(pass) {
        const encryptedMsg = "{encrypted}";
        const encryptedHMAC = encryptedMsg.substring(0, 64);
        const encryptedHTML = encryptedMsg.substring(64);
        const decryptedHMAC = CryptoJS.HmacSHA256(
          encryptedHTML,
          CryptoJS.SHA256(pass).toString()
        ).toString();

        if (decryptedHMAC !== encryptedHMAC) {
          alert("Bad passphrase!");
          sessionStorage.removeItem(STORAGE_KEY);
          return;
        }

        // Save for the session
        sessionStorage.setItem(STORAGE_KEY, pass);

        const plainHTML = decryptContent(encryptedHTML, pass);

        document.write("<div id='loading'>Loading</div>");

        document.write(plainHTML);
        document.close();
        var loadingElem = document. getElementById("loading"); 
        loadingElem. remove();
      }

I create a "loading" div, then remove it after the rest of the document is written.

Kinda hacky, but it works for now.

[robinmoisson]

Hey @pixel-dust-dev, thank you for reporting and providing a suggested fix. Sorry for the long delay in getting to it. Do you still have an example of a file that produces a FOUC?

I opened a PR that should fix the password prompt flash when using the "Remember-me" in #142, but your reported issue is different and I haven't seen the issue on the files I use staticrypt on, which might be too simple.