Mantine UI – Notification with loader and update

Notify data update with notification – Mantine UI loader and then success or failure message notification with icons.

Mantine Notification Loader icon and success icon.

import { IconCheck } from "@tabler/icons-react";
import { notifications } from "@mantine/notifications";

    notifications.show({
        id: 'load-data',
        loading: true,
        title: 'Updating role..',
        message: `Hold on, your changes are getting updated...`,
        autoClose: false,
        withCloseButton: false,
    });

      notifications.update({
        id: 'load-data',
        color: 'teal',
        title: 'Success',
        message: 'Member Role Updated Successfully!',
        icon: <IconCheck size="1rem" />,
        autoClose: 2000,
      });