Skip to content

Conversation

@sebbert
Copy link
Contributor

@sebbert sebbert commented Dec 3, 2020

The default HTML template for nimdoc currently initializes the dark mode switch and pragma dots when the onload event is fired. But since the onload event does not fire until all external resources (images, stylesheets, fonts, etc.) have been loaded, the light theme is shown for a brief moment before the document is fully loaded, and it switches to the dark theme. This is quite jarring, especially on slower internet connections. So let's instead initialize these things on the DOMContentLoaded event, which is fired right after the document has been parsed and the initial DOM structure is ready. This means that we now display the dark mode immediately, without having to wait for external resources to load first.

For reference, see:

I have updated the snapshot tests in nimdoc/, and done some manual testing of both the theme switch and the pragma dots, to confirm that this does not break anything. Please let me know if I've missed anything.

@sebbert
Copy link
Contributor Author

sebbert commented Dec 3, 2020

Agh, seems like this fails due to some problems connecting to GitHub to clone repositories for the package tests.
Doesn't seem like I am allowed to re-run jobs from the UI, but I'll try to amend this commit to force a rebuild.

@sebbert sebbert force-pushed the nimdoc-init-on-domcontentloaded branch from 1bf8db9 to ef4d0b3 Compare December 3, 2020 22:48
@ringabout ringabout closed this Dec 4, 2020
@ringabout ringabout reopened this Dec 4, 2020
@sebbert sebbert force-pushed the nimdoc-init-on-domcontentloaded branch 2 times, most recently from b8e297f to 98179fa Compare December 4, 2020 10:58
@sebbert
Copy link
Contributor Author

sebbert commented Dec 4, 2020

Nope, they're still flaking :( For what it's worth, these changes should have no effect on the package tests, and the docs tests are succeeding.

@ringabout
Copy link
Member

See #15701

The default HTML template for nimdoc currently initializes the dark mode switch and pragma dots when the onload event is fired. But since the onload event does not fire until all external resources (images, stylesheets, fonts, etc.) have been loaded, the light theme is shown for a brief moment before the document is fully loaded, and it switches to the dark theme. This is quite jarring, especially on slower internet connections. So let's instead initialize these things on the DOMContentLoaded event, which is fired right after the document has been parsed and the initial DOM structure is ready. This means that we now display the dark mode immediately, without having to wait for external resources to load first.

For reference, see:
- https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
- https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

I have updated the snapshot tests in `nimdoc/`, and done some manual testing of both the theme switch and the pragma dots, to confirm that this does not break anything. Please let me know if I've missed anything.
@sebbert sebbert force-pushed the nimdoc-init-on-domcontentloaded branch from 98179fa to e5165dd Compare December 5, 2020 23:35
@Araq Araq merged commit 93b6fac into nim-lang:devel Dec 6, 2020
@sebbert sebbert deleted the nimdoc-init-on-domcontentloaded branch December 6, 2020 11:08
mildred pushed a commit to mildred/Nim that referenced this pull request Jan 11, 2021
…im-lang#16247)

The default HTML template for nimdoc currently initializes the dark mode switch and pragma dots when the onload event is fired. But since the onload event does not fire until all external resources (images, stylesheets, fonts, etc.) have been loaded, the light theme is shown for a brief moment before the document is fully loaded, and it switches to the dark theme. This is quite jarring, especially on slower internet connections. So let's instead initialize these things on the DOMContentLoaded event, which is fired right after the document has been parsed and the initial DOM structure is ready. This means that we now display the dark mode immediately, without having to wait for external resources to load first.

For reference, see:
- https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
- https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

I have updated the snapshot tests in `nimdoc/`, and done some manual testing of both the theme switch and the pragma dots, to confirm that this does not break anything. Please let me know if I've missed anything.
ardek66 pushed a commit to ardek66/Nim that referenced this pull request Mar 26, 2021
…im-lang#16247)

The default HTML template for nimdoc currently initializes the dark mode switch and pragma dots when the onload event is fired. But since the onload event does not fire until all external resources (images, stylesheets, fonts, etc.) have been loaded, the light theme is shown for a brief moment before the document is fully loaded, and it switches to the dark theme. This is quite jarring, especially on slower internet connections. So let's instead initialize these things on the DOMContentLoaded event, which is fired right after the document has been parsed and the initial DOM structure is ready. This means that we now display the dark mode immediately, without having to wait for external resources to load first.

For reference, see:
- https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
- https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

I have updated the snapshot tests in `nimdoc/`, and done some manual testing of both the theme switch and the pragma dots, to confirm that this does not break anything. Please let me know if I've missed anything.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants