ms2/modeler loading animations (#447)

* fix(ms2/form-submit-button): correct ButtonProps + await onSubmit before resetting fields

* feat(ms2/version-creation-button): loading animation

* feat(ms2/modeler): version created message

* feat(ms2/share-modal): spin animation when checking if process exists

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/modeler-share-modal.tsx

@@ -1,6 +1,6 @@
 'use client';
 import React, { FC, useState } from 'react';
-import { Modal, Button, Tooltip, Space, Divider, message, Grid, App } from 'antd';
+import { Modal, Button, Tooltip, Space, Divider, Grid, App, Spin } from 'antd';
 import {
   ShareAltOutlined,
   LinkOutlined,
@@ -9,7 +9,6 @@ import {
   RightOutlined,
   CopyOutlined,
   FileImageOutlined,
-  FilePdfOutlined,
 } from '@ant-design/icons';
 import useModelerStateStore from './use-modeler-state-store';
 import { copyProcessImage } from '@/lib/process-export/copy-process-image';
@@ -27,7 +26,6 @@ import { getProcess } from '@/lib/data/processes';
 import { Process, ProcessMetadata } from '@/lib/data/process-schema';
 import { useEnvironment } from '@/components/auth-can';
 import { useAddControlCallback } from '@/lib/controls-store';
-import { set } from 'zod';
 
 type ShareModalProps = {
   onExport: () => void;
@@ -54,18 +52,21 @@ const ModelerShareModalButton: FC<ShareModalProps> = ({
   const [allowIframeTimestamp, setAllowIframeTimestamp] = useState(0);
   const { message } = App.useApp();
   const [processData, setProcessData] = useState<Omit<ProcessMetadata, 'bpmn'>>();
+  const [checkingIfProcessShared, setCheckingIfProcessShared] = useState(false);
 
   const checkIfProcessShared = async () => {
-    const res = await getProcess(processId as string, environment.spaceId);
-    if ('error' in res) {
-      console.log('Failed to fetch process');
-    } else {
-      const { sharedAs, allowIframeTimestamp, shareTimestamp } = res;
-      setSharedAs(sharedAs as SharedAsType);
-      setShareToken(shareToken);
-      setShareTimestamp(shareTimestamp);
-      setAllowIframeTimestamp(allowIframeTimestamp);
-    }
+    try {
+      setCheckingIfProcessShared(true);
+      const res = await getProcess(processId as string, environment.spaceId);
+      if (!('error' in res)) {
+        const { sharedAs, allowIframeTimestamp, shareTimestamp } = res;
+        setSharedAs(sharedAs as SharedAsType);
+        setShareToken(shareToken);
+        setShareTimestamp(shareTimestamp);
+        setAllowIframeTimestamp(allowIframeTimestamp);
+      }
+    } catch (_) {}
+    setCheckingIfProcessShared(false);
   };
 
   const getProcessData = () => {
@@ -370,10 +371,10 @@ const ModelerShareModalButton: FC<ShareModalProps> = ({
         </Space>
 
         {breakpoint.lg && activeIndex !== null && optionsDesktop[activeIndex].subOption && (
-          <>
+          <Spin spinning={checkingIfProcessShared}>
             <Divider style={{ backgroundColor: '#000' }} />
             {optionsDesktop[activeIndex].subOption}
-          </>
+          </Spin>
         )}
       </Modal>
       <Tooltip title="Share">

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[processId]/modeler-toolbar.tsx

@@ -118,7 +118,9 @@ const ModelerToolbar = ({
           await modeler?.loadBPMN(newBpmn);
         }
       }
+
       router.refresh();
+      message.success('Version Created');
     } catch (_) {
       message.error('Something went wrong');
     }

src/management-system-v2/components/form-submit-button.tsx

@@ -1,5 +1,4 @@
-import { ButtonProps } from '@react-email/components';
-import { FormInstance, Form, Button } from 'antd';
+import { FormInstance, Form, Button, ButtonProps } from 'antd';
 import React, { useState } from 'react';
 
 const FormSubmitButton = <TData = any,>({
@@ -44,8 +43,8 @@ const FormSubmitButton = <TData = any,>({
       type="primary"
       htmlType="submit"
       disabled={!submittable}
-      onClick={() => {
-        onSubmit?.(values);
+      onClick={async () => {
+        await onSubmit?.(values);
         form.resetFields();
       }}
     >

src/management-system-v2/components/version-creation-button.tsx

@@ -9,22 +9,24 @@ import FormSubmitButton from './form-submit-button';
 type VersionModalProps = {
   show: boolean;
   close: (values?: { versionName: string; versionDescription: string }) => void;
+  loading?: boolean;
 };
-const VersionModal: React.FC<VersionModalProps> = ({ show, close }) => {
+const VersionModal: React.FC<VersionModalProps> = ({ show, close, loading }) => {
   const [form] = Form.useForm();
 
   return (
     <Modal
       title="Create New Version"
       open={show}
       onCancel={() => {
-        close();
+        if (!loading) close();
       }}
       footer={[
         <Button
           key="cancel"
+          disabled={loading}
           onClick={() => {
-            close();
+            if (!loading) close();
           }}
         >
           Cancel
@@ -34,6 +36,9 @@ const VersionModal: React.FC<VersionModalProps> = ({ show, close }) => {
           form={form}
           onSubmit={close}
           submitText="Create Version"
+          buttonProps={{
+            loading,
+          }}
         ></FormSubmitButton>,
       ]}
     >
@@ -66,25 +71,33 @@ type VersionCreationButtonProps = ButtonProps & {
 const VersionCreationButton = forwardRef<HTMLAnchorElement, VersionCreationButtonProps>(
   ({ createVersion, ...props }, ref) => {
     const [isVersionModalOpen, setIsVersionModalOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
 
     return (
       <>
         <Button
           ref={ref}
+          loading={false}
           {...props}
           onClick={() => {
             setIsVersionModalOpen(true);
           }}
         ></Button>
         <VersionModal
-          close={(values) => {
-            setIsVersionModalOpen(false);
-
+          close={async (values) => {
             if (values) {
-              createVersion(values);
+              const createResult = createVersion(values);
+              if (createResult instanceof Promise) {
+                setLoading(true);
+                await createResult;
+                setLoading(false);
+              }
             }
+
+            setIsVersionModalOpen(false);
           }}
           show={isVersionModalOpen}
+          loading={loading}
         ></VersionModal>
       </>
     );