fix(web): show loading for various actions

web/e2e/project/content/view.spec.ts

@@ -56,6 +56,7 @@ test("View CRUD has succeeded", async ({ page }) => {
   await page.getByText("Remove View").click();
   await page.getByRole("button", { name: "Remove" }).click();
   await closeNotification(page, false);
+  await page.getByRole("button", { name: "Cancel" }).click();
 
   await page.getByText("text", { exact: true }).click();
   await expect(

web/e2e/project/item/fields/option.spec.ts

@@ -156,7 +156,7 @@ test("Option field editing has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "plus New" }).click();
   await page.locator(".ant-select-selection-item").nth(1).click();
   await page.getByTitle("new third").locator("div").last().click();
-  await page.getByRole("button", { name: "delete" }).nth(1).click();
+  await page.getByLabel("Update Option").getByRole("button", { name: "delete" }).last().click();
   await page.getByRole("button", { name: "plus New" }).click();
   await page.locator(".ant-select-selection-item").nth(1).click();
   await page.getByTitle("new third").locator("div").last().click();

web/e2e/project/item/metadata/tag.spec.ts

@@ -152,7 +152,7 @@ test("Tag metadata editing has succeeded", async ({ page }) => {
   await page.getByText("Tag3").nth(2).click();
   await expect(page.getByLabel("Update Tag").getByText("Tag1Tag2Tag3")).toBeVisible();
   await page.getByRole("tab", { name: "Settings" }).click();
-  await page.getByRole("button", { name: "delete" }).first().click();
+  await page.getByLabel("Update Tag").getByRole("button", { name: "delete" }).first().click();
   await page.getByRole("tab", { name: "Default value" }).click();
   await expect(page.getByLabel("Update Tag").getByText("Tag2Tag3")).toBeVisible();
   await page.locator(".ant-select-selector").click();
@@ -177,6 +177,7 @@ test("Tag metadata editing has succeeded", async ({ page }) => {
   await closeNotification(page);
   await page.getByRole("cell").getByLabel("edit").locator("svg").first().click();
   await expect(page.getByText("Tag3")).toBeVisible();
+  await page.getByLabel("close-circle").locator("svg").hover();
   await page.getByLabel("close-circle").locator("svg").click();
   await expect(page.getByText("Please input field!")).toBeVisible();
   await page.locator(".ant-select-selector").click();

web/src/components/molecules/AccountSettings/DangerZone.tsx

@@ -7,7 +7,7 @@ import ContentSection from "@reearth-cms/components/atoms/InnerContents/ContentS
 import Modal from "@reearth-cms/components/atoms/Modal";
 import { useT } from "@reearth-cms/i18n";
 
-export interface Props {
+interface Props {
   onUserDelete: () => Promise<void>;
 }
 
@@ -19,8 +19,9 @@ const DangerZone: React.FC<Props> = ({ onUserDelete }) => {
     confirm({
       title: t("Are you sure you want to delete your account?"),
       icon: <Icon icon="exclamationCircle" />,
-      onOk() {
-        onUserDelete();
+      cancelText: t("Cancel"),
+      async onOk() {
+        await onUserDelete();
       },
     });
   }, [confirm, onUserDelete, t]);

web/src/components/molecules/Asset/AssetList/index.tsx

@@ -25,6 +25,7 @@ interface Props {
   uploading: boolean;
   uploadModalVisibility: boolean;
   loading: boolean;
+  deleteLoading: boolean;
   uploadUrl: { url: string; autoUnzip: boolean };
   uploadType: UploadType;
   selectedAsset?: Asset;
@@ -61,6 +62,7 @@ const AssetList: React.FC<Props> = ({
   uploading,
   uploadModalVisibility,
   loading,
+  deleteLoading,
   uploadUrl,
   uploadType,
   selectedAsset,
@@ -144,6 +146,7 @@ const AssetList: React.FC<Props> = ({
             assetList={assetList}
             selection={selection}
             loading={loading}
+            deleteLoading={deleteLoading}
             selectedAsset={selectedAsset}
             totalCount={totalCount}
             page={page}

web/src/components/molecules/Asset/AssetListTable/index.tsx

@@ -31,7 +31,11 @@ import { compressedFileFormats } from "../../Common/Asset";
 
 interface Props {
   assetList: Asset[];
+  selection: {
+    selectedRowKeys: Key[];
+  };
   loading: boolean;
+  deleteLoading: boolean;
   selectedAsset?: Asset;
   totalCount: number;
   page: number;
@@ -41,9 +45,6 @@ interface Props {
   onAssetSelect: (assetId: string) => void;
   onEdit: (assetId: string) => void;
   onSearchTerm: (term?: string) => void;
-  selection: {
-    selectedRowKeys: Key[];
-  };
   setSelection: (input: { selectedRowKeys: Key[] }) => void;
   onAssetsReload: () => void;
   onAssetDelete: (assetIds: string[]) => Promise<void>;
@@ -58,6 +59,7 @@ const AssetListTable: React.FC<Props> = ({
   assetList,
   selection,
   loading,
+  deleteLoading,
   selectedAsset,
   totalCount,
   page,
@@ -263,22 +265,32 @@ const AssetListTable: React.FC<Props> = ({
     [onSearchTerm, searchTerm, t],
   );
 
-  const AlertOptions = useCallback(
+  const alertOptions = useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (props: any) => {
       return (
-        <Space size={16}>
-          <DeselectButton onClick={props.onCleanSelected}>
-            <Icon icon="clear" /> {t("Deselect")}
-          </DeselectButton>
+        <Space size={4}>
+          <Button
+            type="link"
+            size="small"
+            icon={<Icon icon="clear" />}
+            onClick={props.onCleanSelected}>
+            {t("Deselect")}
+          </Button>
           <DownloadButton displayDefaultIcon type="link" selected={props.selectedRows} />
-          <DeleteButton onClick={() => onAssetDelete?.(props.selectedRowKeys)}>
-            <Icon icon="delete" /> {t("Delete")}
-          </DeleteButton>
+          <Button
+            type="link"
+            size="small"
+            icon={<Icon icon="delete" />}
+            onClick={() => onAssetDelete(props.selectedRowKeys)}
+            danger
+            loading={deleteLoading}>
+            {t("Delete")}
+          </Button>
         </Space>
       );
     },
-    [onAssetDelete, t],
+    [deleteLoading, onAssetDelete, t],
   );
 
   const handleChange = useCallback(
@@ -308,7 +320,7 @@ const AssetListTable: React.FC<Props> = ({
     <ResizableProTable
       dataSource={assetList}
       columns={columns}
-      tableAlertOptionRender={AlertOptions}
+      tableAlertOptionRender={alertOptions}
       search={false}
       rowKey="id"
       options={options}
@@ -330,19 +342,6 @@ const CommentsButton = styled(Button)`
   padding: 0;
 `;
 
-const DeselectButton = styled.a`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-const DeleteButton = styled.a`
-  color: #ff7875;
-  :hover {
-    color: #ff7875b3;
-  }
-`;
-
 const MoreItemsButton = styled(Button)`
   padding: 4px;
   display: flex;

web/src/components/molecules/Asset/UploadModal/UploadModal.tsx

@@ -56,14 +56,25 @@ const UploadModal: React.FC<Props> = ({
       centered
       open={visible}
       onCancel={onCancel}
-      footer={null}
+      footer={
+        <>
+          <Button type="default" disabled={uploading} onClick={onCancel}>
+            {t("Cancel")}
+          </Button>
+          <Button
+            type="primary"
+            onClick={onUpload}
+            disabled={fileList?.length === 0 && !uploadUrl.url}
+            loading={uploading}>
+            {uploading ? t("Uploading") : alsoLink ? t("Upload and Link") : t("Upload")}
+          </Button>
+        </>
+      }
       width="50vw"
       afterClose={onUploadModalClose}
       styles={{
         body: {
           minHeight: "50vh",
-          position: "relative",
-          paddingBottom: "80px",
         },
       }}>
       <div>
@@ -77,18 +88,6 @@ const UploadModal: React.FC<Props> = ({
           <UrlTab uploadUrl={uploadUrl} setUploadUrl={setUploadUrl} />
         </TabPane>
       </Tabs>
-      <Footer>
-        <CancelButton type="default" disabled={uploading} onClick={onCancel}>
-          {t("Cancel")}
-        </CancelButton>
-        <Button
-          type="primary"
-          onClick={onUpload}
-          disabled={fileList?.length === 0 && !uploadUrl.url}
-          loading={uploading}>
-          {uploading ? t("Uploading") : alsoLink ? t("Upload and Link") : t("Upload")}
-        </Button>
-      </Footer>
     </StyledModal>
   );
 };
@@ -102,15 +101,4 @@ const StyledModal = styled(Modal)`
   }
 `;
 
-const Footer = styled.div`
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
-  padding: 10px;
-`;
-
-const CancelButton = styled(Button)`
-  margin-right: 8px;
-`;
-
 export default UploadModal;

web/src/components/molecules/Content/Details/index.tsx

@@ -46,6 +46,7 @@ interface Props {
   totalCount: number;
   page: number;
   pageSize: number;
+  publishLoading: boolean;
   requestModalLoading: boolean;
   requestModalTotalCount: number;
   requestModalPage: number;
@@ -140,6 +141,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
   onRequestTableChange,
   onRequestSearchTerm,
   onRequestTableReload,
+  publishLoading,
   requestModalLoading,
   requestModalTotalCount,
   requestModalPage,
@@ -213,6 +215,7 @@ const ContentDetailsMolecule: React.FC<Props> = ({
             onRequestTableChange={onRequestTableChange}
             onRequestSearchTerm={onRequestSearchTerm}
             onRequestTableReload={onRequestTableReload}
+            publishLoading={publishLoading}
             requestModalLoading={requestModalLoading}
             requestModalTotalCount={requestModalTotalCount}
             requestModalPage={requestModalPage}

web/src/components/molecules/Content/Form/index.tsx

@@ -64,6 +64,7 @@ interface Props {
   totalCount: number;
   page: number;
   pageSize: number;
+  publishLoading: boolean;
   requestModalLoading: boolean;
   requestModalTotalCount: number;
   requestModalPage: number;
@@ -152,6 +153,7 @@ const ContentForm: React.FC<Props> = ({
   onRequestTableChange,
   onRequestSearchTerm,
   onRequestTableReload,
+  publishLoading,
   requestModalLoading,
   requestModalTotalCount,
   requestModalPage,
@@ -481,7 +483,7 @@ const ContentForm: React.FC<Props> = ({
               {itemId && (
                 <>
                   {showPublishAction && (
-                    <Button type="primary" onClick={handlePublishSubmit}>
+                    <Button type="primary" onClick={handlePublishSubmit} loading={publishLoading}>
                       {t("Publish")}
                     </Button>
                   )}
@@ -664,9 +666,10 @@ const ContentForm: React.FC<Props> = ({
             onRequestTableReload={onRequestTableReload}
           />
           <PublishItemModal
-            unpublishedItems={unpublishedItems}
-            itemId={itemId}
             open={publishModalOpen}
+            loading={publishLoading}
+            itemId={itemId}
+            unpublishedItems={unpublishedItems}
             onClose={handlePublishItemClose}
             onSubmit={onPublish}
           />

web/src/components/molecules/Content/List/index.tsx

@@ -24,7 +24,9 @@ interface Props {
   collapsed: boolean;
   model?: Model;
   contentTableFields?: ContentTableField[];
-  itemsDataLoading: boolean;
+  loading: boolean;
+  deleteLoading: boolean;
+  unpublishLoading: boolean;
   contentTableColumns?: ExtendedColumns[];
   modelsMenu: React.ReactNode;
   selectedItem?: Item;
@@ -70,7 +72,9 @@ const ContentListMolecule: React.FC<Props> = ({
   contentTableFields,
   contentTableColumns,
   modelsMenu,
-  itemsDataLoading,
+  loading,
+  deleteLoading,
+  unpublishLoading,
   selectedItem,
   selection,
   totalCount,
@@ -141,7 +145,9 @@ const ContentListMolecule: React.FC<Props> = ({
                 searchTerm={searchTerm}
                 page={page}
                 pageSize={pageSize}
-                loading={itemsDataLoading}
+                loading={loading}
+                deleteLoading={deleteLoading}
+                unpublishLoading={unpublishLoading}
                 selectedItem={selectedItem}
                 selection={selection}
                 onUnpublish={onUnpublish}

web/src/components/molecules/Content/PublishItemModal/index.tsx

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { useCallback, useEffect, useState } from "react";
 
+import Button from "@reearth-cms/components/atoms/Button";
 import Checkbox from "@reearth-cms/components/atoms/Checkbox";
 import Form from "@reearth-cms/components/atoms/Form";
 import Modal from "@reearth-cms/components/atoms/Modal";
@@ -17,6 +18,7 @@ interface FormValues {
 
 interface Props {
   open: boolean;
+  loading: boolean;
   itemId: string;
   unpublishedItems: FormItem[];
   onClose: () => void;
@@ -29,6 +31,7 @@ const initialValues: FormValues = {
 
 const PublishItemModal: React.FC<Props> = ({
   open,
+  loading,
   itemId,
   unpublishedItems,
   onClose,
@@ -72,8 +75,20 @@ const PublishItemModal: React.FC<Props> = ({
   const handleClose = useCallback(() => {
     onClose();
   }, [onClose]);
+
   return (
-    <Modal open={open} onCancel={handleClose} onOk={handleSubmit} title={t("Publish")}>
+    <Modal
+      open={open}
+      onCancel={handleClose}
+      title={t("Publish")}
+      footer={[
+        <Button onClick={handleClose} disabled={loading}>
+          {t("Cancel")}
+        </Button>,
+        <Button type="primary" loading={loading} onClick={handleSubmit}>
+          {t("OK")}
+        </Button>,
+      ]}>
       <Form form={form} layout="vertical" initialValues={initialValues}>
         {unpublishedItems?.length !== 0 && (
           <WarningText