Possible bug: When displayLoadingBubble is set to TRUE and the loading property's content string for text or svg is not set, the submit button HAS a loading animation.

[bruffridge]

deep-chat-dev v9.0.202

The docs state:

When displayLoadingBubble is set to false and the loading property's content string for text or svg is not set, the submit button will have a loading animation.

However, I'm also seeing the loading animation in the submit button when displayLoadingBubble is set to true. Not sure if this is the intended behavior or not so thought I'd mention it.

<deep-chat
  id="chat-element"
  displayLoadingBubble={true}
  ...
  submitButtonStyles={{
      submit: {
        container: {
          default: {
            width: "1em",
            height: "1em",
            right: "calc(10% + 0.3em)",
            bottom: ".87em",
            borderRadius: "100vmax",
            padding: "0.3em",
            backgroundColor: "var(--user-message-background-color)"
          }
        },
        svg: {
          content: '<svg viewBox="2 2 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3C12.2652 3 12.5196 3.10536 12.7071 3.29289L19.7071 10.2929C20.0976 10.6834 20.0976 11.3166 19.7071 11.7071C19.3166 12.0976 18.6834 12.0976 18.2929 11.7071L13 6.41421V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V6.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L11.2929 3.29289C11.4804 3.10536 11.7348 3 12 3Z" fill="#ffffff" stroke="white" stroke-width="1"/></svg>'
        }
      }
  }}

I am able to remove the loading animation by setting the loading property's content string for text or svg

  submitButtonStyles={{
    submit: {
      container: {
        default: {
          width: "1em",
          height: "1em",
          right: "calc(10% + 0.3em)",
          bottom: ".87em",
          borderRadius: "100vmax",
          padding: "0.3em",
          backgroundColor: "var(--user-message-background-color)"
        }
      },
      svg: {
        content: '<svg viewBox="2 2 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3C12.2652 3 12.5196 3.10536 12.7071 3.29289L19.7071 10.2929C20.0976 10.6834 20.0976 11.3166 19.7071 11.7071C19.3166 12.0976 18.6834 12.0976 18.2929 11.7071L13 6.41421V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V6.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L11.2929 3.29289C11.4804 3.10536 11.7348 3 12 3Z" fill="#ffffff" stroke="white" stroke-width="1"/></svg>'
      }
    },
    loading: {
      container: {
        default: {
          backgroundColor: "var(--chat-background-color)",
        }
      },
      svg: {
        content: '<svg viewBox="2 2 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3C12.2652 3 12.5196 3.10536 12.7071 3.29289L19.7071 10.2929C20.0976 10.6834 20.0976 11.3166 19.7071 11.7071C19.3166 12.0976 18.6834 12.0976 18.2929 11.7071L13 6.41421V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V6.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L11.2929 3.29289C11.4804 3.10536 11.7348 3 12 3Z" fill="#b1b1b1" stroke="#b1b1b1" stroke-width="1"/></svg>'
      }
    }
  }}

[OvidijusParsiunas]

Hi @bruffridge. That is very much the intended behaviour. If the user has an intention to not display the loading message via the displayLoadingBubble property, they may also want the submit button's loading animation to also disappear. However, we still keep it to retain some sort of an indication that the response message is loading for the end user. Hence, the only way to override this is by actually defining your own content for the loading property as you have done.

Perhaps I should reword the information bubble to better portray the intended outcome.

Thankyou!