fix(iframe): use filtered.length for style loading completion check

[allandelmare]

Summary

Fix style loading validation to compare against filtered.length instead of elements.length.

Problem

When stylesheets are dynamically added to the DOM (e.g., Monaco editor CSS), the elements array grows but filtered remains the same size. This causes the completion check stylesLoaded >= elements.length to never trigger, leaving the iframe in a loading state.

Solution

Change the comparison from elements.length to filtered.length since filtered represents the actual stylesheets that need to load.

Changes

• packages/core/components/AutoFrame/index.tsx: 2 lines changed

Closes #1324

[vercel]

@allandelmare is attempting to deploy a commit to the Puck Team on Vercel.

A member of the Team first needs to authorize it.

[kernel-io]

This patch requires more changes to fully solve the issue

After appending styles to doc.head - count how many <style> elements are loaded as they don't fire onload events, after this check if stylesLoaded >= filtered.length - this also handles an edge case where filtered.length == 0

i.e on line 292.

doc.head.append(...filtered)

// Count <style> elements as immediately loaded (they don't fire onload)
filtered.forEach((mirror) => {
  if (mirror.nodeName === "STYLE") {
    stylesLoaded = stylesLoaded + 1;
  }
});

if (stylesLoaded >= filtered.length) {
  onStylesLoaded();
}

[allandelmare]

Good catch, thanks! Pushed a fix in 7f300f5.