Inline color mode switcher code to reduce flashing #88
Conversation
|
I think inlining is the right move here, I only caught this issue when putting this code up on demo.ctfd.io as locally the flash doesn't happen at all. |
|
I found that the flashing happened on demo.ctfd.io even after this because of Cloudflare's Rocket Loader. However I did notice the flashing locally which this PR did fix so it was still useful. |
|
From my testing on Firefox, the color theme shouldn't flash as the browser waits for the JS (as it is in What browser are you using and how are you refreshing the webpage? Are you forcing the browser to flush its cache when testing? Do you experience the same flashes on https://hackropole.fr/ (I have implemented a similar color theme switcher there) ? I'm not a fan of inlining JS in HTML as I am used to blocking inline JS in CSP, but if that reduces flashing, then why not. |
|
@erdnaxe I was testing in a recent version of Chrome. I tried hard refresh and a regular refresh. It would even show up when just clicking to other pages. I'm not a big fan of inlining it either but the flash was getting a little annoying. I think the main cause was Cloudflare's Rocket Loader but I will take a look and try to put it back in a dedicated file. One possible cause that I didn't investigate too much was whether the type being module caused Chrome to ignore the defer=False. |
|
@erdnaxe I reverted this back to the color_mode_switcher.js file on https://demo.ctfd.io/ and I am seeing a quick flash of white on Chrome and Firefox. EDIT: Will leave this up for a little bit |
|
@ColdHeat arg, I found the culprit! I confirm that I observe the flashing on demo.ctfd.io, which confirms the JS is deferred. So the fix should be as simple as patching CTFd to remove module type on this JS file: -<script type="module" src="/themes/core-beta/static/assets/color_mode_switcher.52334129.js"></script>
+<script src="/themes/core-beta/static/assets/color_mode_switcher.52334129.js"></script> |
|
I am going to make a pull request to remove type=module when defer is False in https://github.com/CTFd/CTFd/blob/master/CTFd/constants/assets.py#L28 |
|
Yeah I do see that removing type="module" makes the original code work. I will go through it that new PR and probably revert the inlining commit. |
Inline the color mode switcher code to reduce flashing. In my testing even with speed throttling there is no flashing of the incorrect color.
cc @erdnaxe