fix: ensure inorder loading content always wrapped in comment

Author: DylanPiercey

src/components/micro-frame/__tests__/__snapshots__/ssr-stream-loading.expected.md

@@ -63,6 +63,6 @@
   </div>
 </div>
 <script>
-  ((e,t,d)=>{t=document.getElementById(e);do{t.removeChild(d=t.firstChild)}while(d.data!==e)})("s0-8-0");
+  ((e,t,d)=>{t=document.getElementById(e);do{t.removeChild(d=t.firstChild.nextSibling)}while(d.data!==e)})("s0-8-0");
 </script>
 ```

src/node_modules/@internal/micro-frame-component/components/ssr-wait.marko

@@ -4,7 +4,7 @@
       <if(input.loading)>
         <!-- Remove all of the <@loading> content after we've received all the data -->
         $ out.script(
-          `((e,t,d)=>{t=document.getElementById(e);do{t.removeChild(d=t.firstChild)}while(d.data!==e)})(${JSON.stringify(input.id)});`,
+          `((e,t,d)=>{t=document.getElementById(e);do{t.removeChild(d=t.firstChild.nextSibling)}while(d.data!==e)})(${JSON.stringify(input.id)});`,
         );
       </if>
     </if>

src/node_modules/@internal/micro-frame-component/node.marko

@@ -86,6 +86,17 @@ static async function fetchBody(input, out, buffer) {
 }
 
 <div id=component.id class=input.class style=input.style data-src=input.src>
+  <if(input.loading && !input.clientReorder)>
+    <!--
+    We put the streamed html in a preserved fragment.
+    This allows Marko to avoid diffing that section.
+    -->
+    $ out.bf("@b", component, true);
+    <${input.loading}/>
+    <!-- output a comment used as a marker to detect where the loading content starts so it can be removed -->$!{`<!--${component.id}-->`}
+    $ out.ef();
+  </if>
+
   <!--
   We put the streamed html in a preserved fragment.
   This allows Marko to avoid diffing that section.
@@ -104,10 +115,6 @@ static async function fetchBody(input, out, buffer) {
     </await>
   </if>
   <else>
-    <if(input.loading)>
-      <${input.loading} key="b"/>
-      <!-- output a comment used as a marker to detect where the loading content starts so it can be removed -->$!{`<!--${component.id}-->`}
-    </if>
     <await(fetchBody(input, out, false))
       timeout=input.timeout
       catch=input.catch