Re-render Mermaid diagrams on window load

[seshrs]

Context

Closes #187.

While researching potential causes for #187, I found that the MermaidJS documentation suggests rendering diagrams only after the page finishes loading. (Source)

It also turns out that the useEffect hook fires after the first render while the JS script is executing — however, CSS resources and fonts may not have finishes loading by that time. (More specifically, document.readyState may be interactive.)

This PR makes Primer Spec re-render Mermaid diagrams again after the window "loads". This second re-render should fix any labels that were clipped.

Why not skip the first Mermaid render and simply render once the window has loaded?

The user already begins to see content before the window's `load` event fires. If we only render Mermaid diagrams after the window loads, users will momentarily see the underlying source code for the diagram before it is rendered by Mermaid. The "flashing" behavior may also cause the page's content to reflow / [shift](https://web.dev/cls/). Here's a screen recording to show what this would look like: https://user-images.githubusercontent.com/12139762/177217696-802ab6b0-8e18-4f4e-a1c0-57c17c84f146.mov

Validation

Follow the reproduction steps of #187 on this PR's preview URL. Verify that the flowchart labels are not cropped on Safari even on the first page load.

Screen recordings:

Before	After
https://user-images.githubusercontent.com/12139762/177218121-27b9ab53-668c-4cf1-bb89-14cd04767528.mov	https://user-images.githubusercontent.com/12139762/177218160-ad7a6bba-d183-4027-8021-ceef48127f7e.mov

[github-actions[bot]]

Thanks for opening this pull request! 🙏

I've changed this PR's base branch to develop. A maintainer will review your PR soon!

[github-actions[bot]]

The spec from this PR is available at https://preview.sesh.rs/previews/eecs485staff/primer-spec/188/.

^{(Available until Wed Aug 03 2022.)}