Alert dialog doesn't support loading button

[charleneyjh1]

Hello Paste team,

My eng informed me that the alert dialog doesn't support loading button. We use the destructive alert dialog quite a lot for deleting actions that usually requires a 1-2 seconds to complete the deletion.

Is this something the Paste team can fix, to support loading button with the alert dialog? Thanks!

[dosubot[bot]]

🤖

Hey @charleneyjh1! 🌟 Great to see you back. Let me dive into this issue about the alert dialog and the loading button scenario you've described. I'll circle back shortly with more info! 🚀

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hi there,

Alert Dialogs were not designed to require a loading state before being dismissed. They're designed to block the current action behind a secondary confirmation, rather than to be part of that action itself. My suggestions, in order of preference:

• Consider an optimistic UI approach
• Use the modal component or the modal-dialog primitive component

For more details, you can refer to the Paste documentation here.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• AlertDialog and asynchronous operations (updated: 06/27/2022, similarity score: 86%)
• Buttons in alerts (updated: 06/17/2021, similarity score: 84%)
• treatment of deletion confirmation on top of side modal - Answer (updated: 05/04/2023, similarity score: 84%)

[SiTaggart]

This is indeed still the answer and guidance from the team right now.

[dosubot[bot]]

🤖

Based on the information I found in the Paste repository, the AlertDialog component was not designed to support a loading state. This is because AlertDialogs are intended to block the current action behind a secondary confirmation, rather than being part of the action itself. You can find more details in these discussions: AlertDialog -- showing loading spinner on confirm button and AlertDialog and asynchronous operations.

However, you can create a workaround by managing the loading state in your own component and passing the appropriate props to the AlertDialog. Here's an example:

import { Button } from "@twilio-paste/button";
import { AlertDialog } from "@twilio-paste/alert-dialog";
import * as React from "react";

export const DestructiveAlertDialogWithLoading = (): JSX.Element => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);

  const handleOpen = (): void => setIsOpen(true);
  const handleClose = (): void => setIsOpen(false);

  const handleConfirm = (): void => {
    setIsLoading(true);
    // Simulate a delay for the destructive action
    setTimeout(() => {
      setIsLoading(false);
      setIsOpen(false);
    }, 2000);
  };

  return (
    <>
      <Button variant="destructive" onClick={handleOpen}>
        Delete object
      </Button>
      <AlertDialog
        heading="Delete data"
        isOpen={isOpen}
        destructive
        onConfirm={handleConfirm}
        onConfirmLabel={isLoading ? "Loading..." : "Delete"}
        onDismiss={handleClose}
        onDismissLabel="Cancel"
        onConfirmDisabled={isLoading}
      >
        Are you sure you want to delete this data? This action cannot be undone.
      </AlertDialog>
    </>
  );
};

In this example, when the user clicks the "Delete" button, the label changes to "Loading..." and the button is disabled until the simulated delay is over. This gives the user feedback that the action is in progress.

This approach should help you achieve the desired functionality without requiring changes to the AlertDialog component itself. If you have any further questions or need more assistance, feel free to ask.

Sources

• AlertDialog -- showing loading spinner on confirm button
• AlertDialog and asynchronous operations
• packages/paste-core/components/alert-dialog/stories/index.stories.tsx
• packages/paste-core/components/alert-dialog/src/AlertDialogContent.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.