Auto-save changes from code editor get lost if you navigate out too quickly

It's a mistake in the useEffect hook responsible for auto-saving changes: the timeout is cleared in the clean-up function, which means navigating to another route will cancel any pending changes. MR incoming.

There is another mistake there: compiledCss and compiledJs are dependencies of the same useEffect hook. Whenever the source code is updated, it will trigger the useEffect hook and kick off the compilation at the same time. The useEffect hook starts the 1 second time-out for the auto-save. If the compilation takes less than that, it will re-trigger the same useEffect hook, canceling out the already ongoing time-out. This means that triggering an auto-save can take up to 1.99 seconds depending on how fast the compilation is. This better explains to me why you were hitting this problem frequently. I will make sure to address this when I update this logic in the yet-to-be-created follow-up issue for 🐛 Global CSS is applied only after there are changes to a component after Global CSS was modified Active .

I recently experienced an issue where the JS component lost all of its data except its label:

(object) array(
   'owner' => '2',
   'data' => 
  array (
    'entity_type' => 'js_component',
    'entity_id' => 'navigation_menu',
    'data' => 
    array (
      'status' => false,
      'name' => '',
      'machineName' => 'navigation_menu',
      'source_code_js' => '',
      'source_code_css' => '',
      'block_override' => NULL,
      'props' => 
      array (
      ),
      'slots' => 
      array (
      ),
      'required' => 
      array (
      ),
    ),
    'data_hash' => 'ebb6b23bf8ad844f',
    'langcode' => NULL,
    'label' => 'Navigation menu',
  ),
   'updated' => 1743575219,
)

It even became disabled. Could this be due to a misfired autosave?

#6 happened because of 🐛 Component name goes missing when first creating one Active .

I think it became clear that the direction of the MR in this issue is not right. I've been trying to patch something already way too fragile. I'll tackle the problem in 📌 Compile Tailwind CSS globally for code components Active where I posted my plan (#7) 📌 Compile Tailwind CSS globally for code components Active .

Leaving this issue open for now, but marking it as postponed.

Per #3516390-12: Compile Tailwind CSS globally for code components → , that's still left to be done.

balintbrews → closed merge request !790

balintbrews → credited callumharrod → .

So, let's hit reset on this issue. 🙂 📌 Compile Tailwind CSS globally for code components Active landed with a lot of improvements we can build upon to fix this problem. I originally thought I'd do this as part of the Tailwind issue, but I ended up only adding the necessary UI states to the code editor Redux slices.

Updating the issue summary, crediting @callumharrod for the toaster and overlay design.