Refactor Quickstart component to prevent error (#4030)

## What are you changing in this pull request and why?

Fixes the `Node.removeChild: The node to be removed is not a child of
this node` error we were seeing when trying to use a Snippet with a
nested <WHcode /> component.

## Additional information

The following code was setup to make sure that in the event a snippet
that is nested under a step (##) in the quickstart markdown file
contained an h2 (##) it would not be rendered as an additional step.
```
      snippetContainer.forEach((snippet) => {
        const parent = snippet?.parentNode;
        while (snippet?.firstChild && parent.className) {
          if (parent) {
            parent.insertBefore(snippet.firstChild, snippet);
          }
        }
      });
```

Since the update core quickstart contains a snippet in Step 8 `<Snippet
path="tutorial-sql-query" />` which contains a nested component `<WHcode
/>` it was causing the component to break when building the steps.

This PR makes sure the component is fully loaded before attempting any
manipulation on the steps.

website/src/components/quickstartTOC/index.js

@@ -26,16 +26,6 @@ function QuickstartTOC() {
     const steps = quickstartContainer.querySelectorAll("h2");
     const snippetContainer = document.querySelectorAll(".snippet");
 
-    // Add snippet container to its parent step
-    snippetContainer.forEach((snippet) => {
-      const parent = snippet?.parentNode;
-      while (snippet?.firstChild && parent.className) {
-        if (parent) {
-          parent.insertBefore(snippet.firstChild, snippet);
-        }
-      }
-    });
-
     // Create an array of objects with the id and title of each step
     const data = Array.from(steps).map((step, index) => ({
       id: step.id,
@@ -49,6 +39,16 @@ function QuickstartTOC() {
 
     // Wrap all h2 (steps), along with all of their direct siblings, in a div until the next h2
     if (mounted) {
+      // Add snippet container to its parent step
+      snippetContainer.forEach((snippet) => {
+        const parent = snippet?.parentNode;
+        while (snippet?.firstChild && parent.className) {
+          if (parent) {
+            parent.insertBefore(snippet.firstChild, snippet);
+          }
+        }
+      });
+
       steps.forEach((step, index) => {
         const wrapper = document.createElement("div");
         wrapper.classList.add(style.stepWrapper);