Merge pull request #409 from contentstack/VE-4921

fix: enhance loading state for form field focus

Author: hiteshshetty-dev

src/visualBuilder/components/FieldToolbar.tsx

@@ -39,6 +39,7 @@ import {
     IVariantStatus,
     VariantRevertDropdown,
 } from "./FieldRevert/FieldRevertComponent";
+import { LoadingIcon } from "./icons/loading";
 
 export type FieldDetails = Pick<
     VisualBuilderCslpEventDetails,
@@ -93,27 +94,22 @@ function handleEdit(fieldMetadata: CslpData) {
 }
 
 function handleFormFieldFocus(eventDetails: VisualBuilderCslpEventDetails) {
-    const { editableElement, fieldMetadata, cslpData } = eventDetails;
-    visualBuilderPostMessage
-        ?.send(VisualBuilderPostMessageEvents.TOGGLE_FORM, {
-            fieldMetadata,
-            cslpData,
-        })
-        .then(() => {
-            visualBuilderPostMessage?.send(
-                VisualBuilderPostMessageEvents.FOCUS_FIELD,
-                {
-                    DOMEditStack: getDOMEditStack(editableElement),
-                }
-            );
-        });
+    const { editableElement } = eventDetails;
+    return visualBuilderPostMessage?.send(
+        VisualBuilderPostMessageEvents.FOCUS_FIELD,
+        {
+            DOMEditStack: getDOMEditStack(editableElement),
+            toggleVisibility: true,
+        }
+    );
 }
 
 function FieldToolbarComponent(
     props: MultipleFieldToolbarProps
 ): JSX.Element | null {
     const { eventDetails, isVariant: isVariantOrParentOfVariant } = props;
     const { fieldMetadata, editableElement: targetElement } = eventDetails;
+    const [isFormLoading, setIsFormLoading] = useState(false);
 
     const parentPath =
         fieldMetadata?.multipleFieldMetadata?.parentDetails?.parentCslpValue ||
@@ -252,15 +248,27 @@ function FieldToolbarComponent(
                     "visual-builder__tooltip--bottom": invertTooltipPosition,
                     [visualBuilderStyles()["visual-builder__tooltip--bottom"]]:
                         invertTooltipPosition,
+                },
+                {
+                    [visualBuilderStyles()["visual-builder__button--comment-loader"]]: isFormLoading,
+                    "visual-builder__button--comment-loader": isFormLoading
                 }
             )}
             data-tooltip={"Form"}
             data-testid={`visual-builder-form`}
-            onClick={(e) => {
-                handleFormFieldFocus(eventDetails);
+            onClick={async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setIsFormLoading(true);
+                try {
+                    await handleFormFieldFocus(eventDetails);
+                } finally {
+                    setIsFormLoading(false);
+                }
             }}
+            disabled={isFormLoading}
         >
-            <FormIcon />
+            {isFormLoading ? <LoadingIcon /> : <FormIcon />}
         </button>
     );
 

src/visualBuilder/visualBuilder.style.ts

@@ -355,6 +355,7 @@ export function visualBuilderStyles() {
             }
         `,
         "visual-builder__button--comment-loader": css`
+            cursor: wait !important;
             svg.loader {
                 height: 16px;
                 width: 16px;