fix: add instance button loading state

Adding a reference instance is an async operation on visual builder
side. Use a loading state to disable the button, so that the add
instance message cannot be sent when it is already sent and a response
is being awaited

Author: faraazb-contentstack

src/visualBuilder/components/addInstanceButton.tsx

@@ -3,44 +3,82 @@ import classNames from "classnames";
 import { visualBuilderStyles } from "../visualBuilder.style";
 import { PlusIcon } from "./icons";
 import { ISchemaFieldMap } from "../utils/types/index.types";
+import { CslpData } from "../../cslp/types/cslp.types";
+import visualBuilderPostMessage from "../utils/visualBuilderPostMessage";
+import { VisualBuilderPostMessageEvents } from "../utils/types/postMessage.types";
+import { Signal } from "@preact/signals";
 
 interface AddInstanceButtonProps {
     value: any;
     onClick: (event: MouseEvent) => void;
     label?: string | undefined;
     fieldSchema: ISchemaFieldMap | undefined;
+    fieldMetadata: CslpData;
+    index: number;
+    loading: Signal<boolean>;
 }
 
 function AddInstanceButtonComponent(
     props: AddInstanceButtonProps
 ): JSX.Element {
     const fieldSchema = props.fieldSchema;
-    const disabled =
-        fieldSchema && "max_instance" in fieldSchema && fieldSchema.max_instance
-            ? props.value.length >= fieldSchema.max_instance
-            : false;
+    const fieldMetadata = props.fieldMetadata;
+    const index = props.index;
+    const loading = props.loading;
+
+    const onClick = async (event: MouseEvent) => {
+        loading.value = true;
+        try {
+            await visualBuilderPostMessage?.send(
+                VisualBuilderPostMessageEvents.ADD_INSTANCE,
+                {
+                    fieldMetadata,
+                    index,
+                }
+            );
+        } catch (error) {
+            console.error("Visual Builder: Failed to add instance", error);
+        }
+        loading.value = false;
+        props.onClick(event);
+    };
+
+    const buttonClassName = classNames(
+        "visual-builder__add-button",
+        visualBuilderStyles()["visual-builder__add-button"],
+        {
+            "visual-builder__add-button--with-label": props.label,
+        },
+        {
+            [visualBuilderStyles()["visual-builder__add-button--loading"]]:
+                loading.value,
+        },
+        visualBuilderStyles()["visual-builder__tooltip"]
+    );
+
+    const maxInstances =
+        fieldSchema && fieldSchema.data_type !== "block"
+            ? fieldSchema.max_instance
+            : undefined;
+    const isMaxInstances = maxInstances
+        ? props.value.length >= maxInstances
+        : false;
+    const disabled = loading.value || isMaxInstances;
 
     return (
         <button
-            className={classNames(
-                "visual-builder__add-button",
-                visualBuilderStyles()["visual-builder__add-button"],
-                {
-                    "visual-builder__add-button--with-label": props.label,
-                },
-                visualBuilderStyles()["visual-builder__tooltip"]
-            )}
+            className={buttonClassName}
             data-tooltip={"Add section"}
             data-testid="visual-builder-add-instance-button"
             disabled={disabled}
             title={
-                disabled && fieldSchema && "max_instance" in fieldSchema
-                    ? `Max ${fieldSchema.max_instance} instances allowed`
+                maxInstances && isMaxInstances
+                    ? `Max ${maxInstances} instances allowed`
                     : undefined
             }
             onClick={(e) => {
                 const event = e as unknown as MouseEvent;
-                props.onClick(event);
+                onClick(event);
             }}
         >
             <PlusIcon />

src/visualBuilder/generators/generateAddInstanceButtons.tsx

@@ -1,31 +1,44 @@
+import React from "preact/compat";
 import { render } from "preact";
 import AddInstanceButtonComponent from "../components/addInstanceButton";
 import { ISchemaFieldMap } from "../utils/types/index.types";
+import { CslpData } from "../../cslp/types/cslp.types";
+import { Signal } from "@preact/signals";
 
 /**
- * Generates a button element, when clicked, triggers the provided callback function.
+ * Generates a button element, when clicked, sends the add instance message and
+ * then calls the provided callback function.
  * @param onClickCallback - The function to be called when the button is clicked.
  * @returns The generated button element.
  */
 export function generateAddInstanceButton({
-    fieldSchema,
     value,
+    fieldSchema,
+    fieldMetadata,
+    index,
+    loading,
     onClick,
     label,
 }: {
+    fieldSchema: ISchemaFieldMap | undefined;
     value: any;
+    fieldMetadata: CslpData;
+    index: number;
+    loading: Signal<boolean>;
     onClick: (event: MouseEvent) => void;
     label?: string | undefined;
-    fieldSchema: ISchemaFieldMap | undefined;
 }): HTMLButtonElement {
     const wrapper = document.createDocumentFragment();
 
     render(
         <AddInstanceButtonComponent
+            loading={loading}
+            index={index}
             value={value}
             label={label}
             onClick={onClick}
             fieldSchema={fieldSchema}
+            fieldMetadata={fieldMetadata}
         />,
         wrapper
     );

src/visualBuilder/utils/multipleElementAddButton.ts

@@ -3,12 +3,11 @@ import {
     generateAddInstanceButton,
     getAddInstanceButtons,
 } from "../generators/generateAddInstanceButtons";
-import visualBuilderPostMessage from "./visualBuilderPostMessage";
-import { VisualBuilderPostMessageEvents } from "./types/postMessage.types";
 import getChildrenDirection from "./getChildrenDirection";
 import { hideOverlay } from "../generators/generateOverlay";
 import { hideHoverOutline } from "../listeners/mouseHover";
 import { ISchemaFieldMap } from "./types/index.types";
+import { signal } from "@preact/signals";
 
 const WAIT_FOR_NEW_INSTANCE_TIMEOUT = 4000;
 
@@ -106,32 +105,30 @@ export function handleAddButtonsForMultiple(
         });
     };
 
+    // this is a shared loading state between the
+    // next and previous button for the duration
+    // between the add-instance post message being
+    // sent and receiving a response for it.
+    const loading = signal(false);
+
     const previousButton = generateAddInstanceButton({
-        onClick: () => {
-            visualBuilderPostMessage
-                ?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {
-                    fieldMetadata: eventDetails.fieldMetadata,
-                    index: prevIndex,
-                })
-                .then(onMessageSent.bind(null, prevIndex));
-        },
-        label,
         fieldSchema,
         value: expectedFieldData,
+        fieldMetadata: eventDetails.fieldMetadata,
+        index: prevIndex,
+        onClick: onMessageSent.bind(null, prevIndex),
+        loading,
+        label,
     });
 
     const nextButton = generateAddInstanceButton({
-        onClick: () => {
-            visualBuilderPostMessage
-                ?.send(VisualBuilderPostMessageEvents.ADD_INSTANCE, {
-                    fieldMetadata: eventDetails.fieldMetadata,
-                    index: nextIndex,
-                })
-                .then(onMessageSent.bind(null, nextIndex));
-        },
-        label,
         fieldSchema,
         value: expectedFieldData,
+        fieldMetadata: eventDetails.fieldMetadata,
+        index: nextIndex,
+        onClick: onMessageSent.bind(null, nextIndex),
+        loading,
+        label,
     });
 
     if (!visualBuilderContainer.contains(previousButton)) {
@@ -216,7 +213,7 @@ export function removeAddInstanceButtons(
 }
 
 /**
- * This function that observes the parent element and focuses the newly added instance.
+ * This function observes the parent element and focuses the newly added instance.
  *
  * @param parentCslp The parent cslp value.
  * @param index The index of the new instance.

src/visualBuilder/visualBuilder.style.ts

@@ -148,6 +148,13 @@ export function visualBuilderStyles() {
             overflow: hidden;
             text-overflow: ellipsis;
         `,
+        "visual-builder__add-button--loading": css`
+            cursor: wait;
+            /* we have not-allowed on disabled, so we need this */
+            &:disabled {
+                cursor: wait;
+            }
+        `,
         "visual-builder__start-editing-btn": css`
             z-index: 1000;
             text-decoration: none;
@@ -666,7 +673,7 @@ export const VisualBuilderGlobalStyles = `
        [data-cslp] [contenteditable="true"] {
             outline: none;
         }
-        
+
         @keyframes visual-builder__spinner {
             0% {
                 transform: rotate(0deg);