fix: Monaco Editor is stuck in loading state after page refresh

src/hooks/useGetSchema.js

@@ -23,19 +23,20 @@ export const useGetSchema = ({ schemaId, skip, resource }) => {
   const isWorkerOkay = isWorkerAvailable && !schemasError;
   const [schema, setSchema] = useState(null);
   const [error, setError] = useState(null);
-  const [loading, setLoading] = useState(!isWorkerOkay ? false : !skip);
-
+  const [loading, setLoading] = useState(true);
   useEffect(() => {
     setSchema(null);
     setError(null);
-    setLoading(!isWorkerOkay ? false : !skip);
+    setLoading(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [schemaId]);
 
   useEffect(() => {
-    if (!areSchemasComputed || schema || skip || !isWorkerOkay) {
+    if (schema || skip || !isWorkerOkay) {
+      setLoading(false);
       return;
     }
+    if (!areSchemasComputed) return;
     sendWorkerMessage('getSchema', schemaId);
 
     addWorkerListener(`schemaComputed:${schemaId}`, ({ schema }) => {

src/shared/ResourceForm/components/ResourceForm.js

@@ -203,6 +203,7 @@ export function ResourceForm({
       schemaId={resourceSchemaId}
       updateValueOnParentChange={true}
       setEditorError={setEditorError}
+      schema={schema}
     />
   );
   editor = renderEditor

src/shared/ResourceForm/fields/Editor.js

@@ -11,6 +11,7 @@ export function Editor({
   convert = true,
   schemaId,
   setEditorError,
+  schema,
   ...props
 }) {
   const { t } = useTranslation();
@@ -85,6 +86,7 @@ export function Editor({
       error={error}
       schemaId={schemaId}
       placeholder={t('clusters.wizard.editor-placeholder')}
+      schema={schema}
     />
   );
 }

src/shared/components/MonacoEditorESM/Editor.js

@@ -29,7 +29,7 @@ export function Editor({
   onFocus,
   options = {}, // IEditorOptions, check Monaco API for the list of options
   placeholder = null,
-  ...rest
+  schema,
 }) {
   const { t } = useTranslation();
   const prevValueRef = useRef(value);
@@ -45,6 +45,7 @@ export function Editor({
     autocompletionDisabled,
     readOnly,
     language,
+    schema,
   });
 
   // set autocompletion global context to the current editor and initialize an editor instance
@@ -90,11 +91,11 @@ export function Editor({
       className="resource-form__wrapper"
       style={{ height, minHeight: height }}
     >
-      {loading ? (
+      {loading && (
         <div className="resource-form__overlay">
           <Spinner />
         </div>
-      ) : null}
+      )}
       <div ref={divRef} className="resource-form__editor" />
       {placeholder && !!!value && (
         <div className="resource-form__placeholder">{placeholder}</div>

src/shared/components/MonacoEditorESM/autocompletion/useAutocompleteWorker.js

@@ -32,6 +32,7 @@ export function useAutocompleteWorker({
   autocompletionDisabled,
   readOnly,
   language,
+  schema: predefinedSchema,
 }) {
   const [schemaId] = useState(predefinedSchemaId || Math.random().toString());
 
@@ -42,11 +43,12 @@ export function useAutocompleteWorker({
     autocompletionDisabled = true;
   }
 
-  const { schema, loading, error } = useGetSchema({
+  const { schemas: fetchedSchema, loading, error } = useGetSchema({
     schemaId,
-    skip: autocompletionDisabled,
+    skip: autocompletionDisabled || !!predefinedSchema,
   });
 
+  const schema = predefinedSchema || fetchedSchema;
   /**
    * Call this before initializing Monaco. This function alters Monaco global config to set up JSON-based
    * autocompletion.