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.

Screenshot:

GIF with throttled network:

The overlay and the toast look amazing! 😍

I'm still easily able to enter a change, navigate away, and have it lost. I can't pinpoint it exactly in the code, but here are some ideas/thoughts:

1. Changes are debounced to 1 second in ui/src/features/code-editor/hooks/useSourceCode.ts. I wonder if we should set the isCompiling/isSaving status in that effect immediately after changes occur outside of the time-out.
2. There is a certain moment when both isCompiling and isSaving can be false, and it can be because compiling was really fast, and saving hasn't started yet.
3. It's worth mentioning that if the compilation takes long, it will trigger the effect again in ui/src/features/code-editor/hooks/useAutoSave.tsx.
4. We can combine isSaving and isCompiling if that helps in any way. We could name it, e.g., isProcessing, and have both saving and compiling set it to true, with only saving setting it to false when it's done.
5. The spinner I added in the Preview component's header can be removed — it was never checked with design, I just added it to see if something is happening.

I still need to add checks for props/slots, global css changes and manually test it, will continue tomorrow

Updated to check for the source global css and source global js changes as well

Very nice! 🤩