Prevent mermaid source code from flashing on page load

[lazka]

If you go to https://squidfunk.github.io/mkdocs-material/reference/diagrams/?h=mermaid#usage and hit refresh the mermaid syntax will flash before the diagram is rendered.

I'd prefer the element to not be visible until it is fully loaded.

Does anyone have any CSS/JS tricks that could help here? I tried but failed due to it using shadow dom.

[kamilkrzyskow]

Hello @lazka,
since the syntax display is due to JavaScript not being loaded yet, the solution is a hit or miss:

1. Add a do-not-display class to the mermaid code block, you need to have attr_list enabled:
   https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#attribute-lists

```mermaid { .do-not-display }

2. Using extra CSS style it to not be displayed:
   https://squidfunk.github.io/mkdocs-material/customization/#additional-css

.do-not-display {
  display: none;
}

3. Using extra JavaScript, remove the .do-not-display class from elements, triggered with the load event, which comes after the DOMContentLoaded event:
   https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript
   https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
   https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

window.addEventListener("load", (event) => {
  const elements = document.querySelectorAll(".do-not-display");
  for (const element of elements) {
    element.classList.remove("do-not-display"); // notice the lack of the dot
  }
});

[lazka]

Thanks. I guess this doesn't work with instant loading, right? Since it uses a global event.

[kamilkrzyskow]

You could exchange the event to use the observable document$.subscribe, but I don't know how well it would work 🤷 https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript (How to integrate with third-party JavaScript libraries)
As said at the start this is a hit or miss solution, as this is basically fighting JavaScript with JavaScript.

[lazka]

Thanks for the link.

I'm wondering if you would consider this a "bug" which could be fixed in mkdocs-material itself, and if I should try filing an issue for it.

[kamilkrzyskow]

Instead of a bug, I would consider this a change request for Material to manage the display of mermaid in a similar fashion as described above, meaning allow users to add a toggle CSS class which would hide the syntax before it's rendered. Perhaps there was something of that sort in the past, so please make sure there isn't a declined issue already. Good luck on getting this approved ✌️

[kamilkrzyskow]

And actually have you tried it and it doesn't work @lazka? Because if my solution does work, then it's a "fixed by customization" issue. The theme can't provide straightforward config toggles for every case.