Component name goes missing when first creating one

I haven't been able to reproduce this, and haven't heard from anyone else — many of us have tested code components a lot in the past days. But your other issue, 📌 Adding to components doesn't appear to update component list - show loading indicator Active , gave me a hunch. Maybe we should try to reproduce with network throttling on, because somehow your environment is not responding as fast. I quickly looked at ui/src/features/code-editor/dialogs/AddCodeComponentDialog.tsx for the signs of race conditions, but couldn't pinpoint anything yet.

In Slack, @larowlan confirmed that just like in #3509528-2: Adding to components doesn't appear to update component list - show loading indicator → , this only happens when the Redux dev tools browser extension is in use (though for both Chrome and Firefox). Re-titling accordingly and downgrading to Normal. We could potentially decide to "won't fix" this, except not being able to use Redux dev tools would be an annoyance for any React developers wanting to contribute to XB.

I think this is a real bug and not just due to Redux dev tools. There is a condition in useCodeComponentData that would allow writing bogus data, I think.

Essentially the effect which writes to the autosave checks if any of its dependencies (the components data) has changed. One the first run it assumes the editor isn't ready and then flags the editor as ready. After the timeout it now thinks the editor is ready and writes data. But nothing makes sure that the following items have valid data in them:

    [
      blockOverride,
      compiledCss,
      compiledJs,
      componentId,
      name,
      props,
      required,
      slots,
      sourceCodeCss,
      sourceCodeJs,
      status,
    ],

Attaching a hacky suggestion made by Copilot. I don't think it is the right approach but it is close to what I was thinking. Before considering the editor ready we need to make sure loading is done and not just trust changes to the main data dependencies to mean loading is complete.

Marking as Critical based on #6.

#6 identified the cause, #7 had the right solution, I just simplified it and extended to the global CSS, too. Major oversight by me. 🤦🏻‍♂️
Thanks, @mglaman! I added steps to reproduce to the issue summary.

@balintbrews thanks for verifying and quick turnaround for a fix 🔥

Turns out this needed more work. I would appreciate help with thorough testing of auto-save, typing into the editor, switching between components etc.