From 0dc4c51e2fc0f5a1952f5e39ac9e232d3811f640 Mon Sep 17 00:00:00 2001
From: Pawan Paudel <pawanpaudel93@gmail.com>
Date: Fri, 26 Apr 2024 22:36:00 +0545
Subject: [PATCH 1/2] fix: Prevent closing modal when submitting

---
 .../CreateProfileModal/CreateProfileModal.tsx |  1 +
 .../DragonDeploy/ArNSUpdateModal.tsx          |  7 ++-
 src/components/DragonDeploy/DragonDeploy.tsx  |  1 +
 src/pages/home/components/NewRepoModal.tsx    |  3 ++
 .../issue/read/tabs/bounty/NewBountyModal.tsx |  6 ++-
 .../read/tabs/bounty/ReadBountyModal.tsx      | 16 ++++--
 src/pages/repository/components/ForkModal.tsx |  1 +
 .../tabs/code-tab/CommitFilesModal.tsx        |  1 +
 .../tabs/code-tab/header/AddFilesModal.tsx    | 49 ++++++++++---------
 .../tabs/code-tab/header/NewBranchModal.tsx   |  1 +
 src/stores/issues/index.ts                    |  5 ++
 11 files changed, 63 insertions(+), 28 deletions(-)

diff --git a/src/components/CreateProfileModal/CreateProfileModal.tsx b/src/components/CreateProfileModal/CreateProfileModal.tsx
index 9fda54b2..d7a2854a 100644
--- a/src/components/CreateProfileModal/CreateProfileModal.tsx
+++ b/src/components/CreateProfileModal/CreateProfileModal.tsx
@@ -41,6 +41,7 @@ export default function CreateProfileModal({ setIsOpen, isOpen }: NewRepoModalPr
   })
 
   function closeModal() {
+    if (isSubmitting) return
     setIsOpen(false)
   }
 
diff --git a/src/components/DragonDeploy/ArNSUpdateModal.tsx b/src/components/DragonDeploy/ArNSUpdateModal.tsx
index 2f6c9192..9cb68abe 100644
--- a/src/components/DragonDeploy/ArNSUpdateModal.tsx
+++ b/src/components/DragonDeploy/ArNSUpdateModal.tsx
@@ -41,6 +41,7 @@ export default function ArNSDomainModal() {
   }, [deployment, domainTxId, domain])
 
   function closeModal() {
+    if (isLoading) return
     setIsOpen(false)
   }
 
@@ -198,7 +199,11 @@ export default function ArNSDomainModal() {
                           </div>
                           {!updateNeeded && !isUpdated && isOnline && <span>Update in progress...</span>}
                           {updateNeeded && <span>Update to latest deployment?</span>}
-                          {!isOnline && <span className='text-sm text-gray-600'>Note: It might take ~30 minutes for the domain to go live.</span>}
+                          {!isOnline && (
+                            <span className="text-sm text-gray-600">
+                              Note: It might take ~30 minutes for the domain to go live.
+                            </span>
+                          )}
                         </div>
                         <div className="flex flex-col gap-3 justify-center mt-6">
                           <div className="flex gap-2">
diff --git a/src/components/DragonDeploy/DragonDeploy.tsx b/src/components/DragonDeploy/DragonDeploy.tsx
index ebd85ed8..db132043 100644
--- a/src/components/DragonDeploy/DragonDeploy.tsx
+++ b/src/components/DragonDeploy/DragonDeploy.tsx
@@ -53,6 +53,7 @@ export default function DragonDeploy() {
   }, [isOpen])
 
   function closeModal() {
+    if (isDeploying) return
     setIsOpen(false)
   }
 
diff --git a/src/pages/home/components/NewRepoModal.tsx b/src/pages/home/components/NewRepoModal.tsx
index 4ddb6ca7..f76a0906 100644
--- a/src/pages/home/components/NewRepoModal.tsx
+++ b/src/pages/home/components/NewRepoModal.tsx
@@ -51,6 +51,7 @@ export default function NewRepoModal({ setIsOpen, isOpen }: NewRepoModalProps) {
   })
 
   function closeModal() {
+    if (isSubmitting) return
     setIsOpen(false)
   }
 
@@ -96,7 +97,9 @@ export default function NewRepoModal({ setIsOpen, isOpen }: NewRepoModalProps) {
       }
     } catch (error) {
       trackGoogleAnalyticsEvent('Repository', 'Failed to create a new repo', 'Create new repo')
+      toast.error(`Failed to create new repository.`)
     }
+    setIsSubmitting(false)
   }
 
   function handleRepositoryVisibilityChange(event: ChangeEvent<HTMLInputElement>) {
diff --git a/src/pages/issue/read/tabs/bounty/NewBountyModal.tsx b/src/pages/issue/read/tabs/bounty/NewBountyModal.tsx
index f1277385..38172990 100644
--- a/src/pages/issue/read/tabs/bounty/NewBountyModal.tsx
+++ b/src/pages/issue/read/tabs/bounty/NewBountyModal.tsx
@@ -10,6 +10,7 @@ import * as yup from 'yup'
 import ArweaveLogo from '@/assets/arweave.svg'
 import CloseCrossIcon from '@/assets/icons/close-cross.svg'
 import { Button } from '@/components/common/buttons'
+import { withAsync } from '@/helpers/withAsync'
 import { useGlobalStore } from '@/stores/globalStore'
 
 type NewBountyModalProps = {
@@ -49,14 +50,15 @@ export default function NewBountyModal({ isOpen, setIsOpen }: NewBountyModalProp
 
     const unixTimestampOfExpiry = Math.floor(data.expiry.getTime() / 1000)
 
-    await addBounty(+issueId!, data.amount, unixTimestampOfExpiry)
+    const { error } = await withAsync(() => addBounty(+issueId!, data.amount, unixTimestampOfExpiry))
 
     setIsSubmitting(false)
 
-    closeModal()
+    if (!error) closeModal()
   }
 
   function closeModal() {
+    if (isSubmitting) return
     setIsOpen(false)
   }
 
diff --git a/src/pages/issue/read/tabs/bounty/ReadBountyModal.tsx b/src/pages/issue/read/tabs/bounty/ReadBountyModal.tsx
index 0c68edec..46698f0f 100644
--- a/src/pages/issue/read/tabs/bounty/ReadBountyModal.tsx
+++ b/src/pages/issue/read/tabs/bounty/ReadBountyModal.tsx
@@ -2,12 +2,14 @@ import { Dialog, Transition } from '@headlessui/react'
 import clsx from 'clsx'
 import { differenceInDays } from 'date-fns'
 import React, { Fragment } from 'react'
+import toast from 'react-hot-toast'
 import SVG from 'react-inlinesvg'
 import { useParams } from 'react-router-dom'
 
 import ArweaveLogo from '@/assets/arweave.svg'
 import CloseCrossIcon from '@/assets/icons/close-cross.svg'
 import { Button } from '@/components/common/buttons'
+import { withAsync } from '@/helpers/withAsync'
 import { useGlobalStore } from '@/stores/globalStore'
 import { Bounty } from '@/types/repository'
 
@@ -39,17 +41,25 @@ export default function ReadBountyModal({ isOpen, setIsOpen, bounty, author }: N
   async function handleCloseButtonClick() {
     setIsSubmitting(true)
 
+    let error
     if (bountyComplete && payTxId.length > 0) {
-      await completeBounty(+issueId!, bounty.id, payTxId)
+      ;({ error } = await withAsync(() => completeBounty(+issueId!, bounty.id, payTxId)))
+      if (error) {
+        toast.error('Failed to complete bounty.')
+      }
     } else {
-      await closeBounty(+issueId!, bounty.id)
+      ;({ error } = await withAsync(() => closeBounty(+issueId!, bounty.id)))
+      if (error) {
+        toast.error('Failed to close bounty.')
+      }
     }
 
     setIsSubmitting(false)
-    closeModal()
+    if (!error) closeModal()
   }
 
   function closeModal() {
+    if (isSubmitting) return
     setIsOpen(false)
   }
 
diff --git a/src/pages/repository/components/ForkModal.tsx b/src/pages/repository/components/ForkModal.tsx
index c5f6fceb..be281aa9 100644
--- a/src/pages/repository/components/ForkModal.tsx
+++ b/src/pages/repository/components/ForkModal.tsx
@@ -52,6 +52,7 @@ export default function ForkModal({ setIsOpen, isOpen, repo }: NewRepoModalProps
   })
 
   function closeModal() {
+    if (isSubmitting) return
     setIsOpen(false)
   }
 
diff --git a/src/pages/repository/components/tabs/code-tab/CommitFilesModal.tsx b/src/pages/repository/components/tabs/code-tab/CommitFilesModal.tsx
index 59b1e2a3..eea790c0 100644
--- a/src/pages/repository/components/tabs/code-tab/CommitFilesModal.tsx
+++ b/src/pages/repository/components/tabs/code-tab/CommitFilesModal.tsx
@@ -63,6 +63,7 @@ export default function CommitFilesModal({ setIsOpen, setIsCommited, isOpen, fil
   }, [files])
 
   function closeModal() {
+    if (isSubmitting) return
     setIsOpen(false)
   }
 
diff --git a/src/pages/repository/components/tabs/code-tab/header/AddFilesModal.tsx b/src/pages/repository/components/tabs/code-tab/header/AddFilesModal.tsx
index c0be8ff5..89ae9d5d 100644
--- a/src/pages/repository/components/tabs/code-tab/header/AddFilesModal.tsx
+++ b/src/pages/repository/components/tabs/code-tab/header/AddFilesModal.tsx
@@ -62,6 +62,7 @@ export default function AddFilesModal({ setIsOpen, isOpen }: NewBranchModal) {
   }, [files])
 
   function closeModal() {
+    if (isSubmitting) return
     setIsOpen(false)
   }
 
@@ -75,33 +76,37 @@ export default function AddFilesModal({ setIsOpen, isOpen }: NewBranchModal) {
 
   async function handleCommitSubmit(data: yup.InferType<typeof schema>) {
     if (files.length > 0 && userRepo) {
-      setIsSubmitting(true)
-
-      const basePath = getCurrentFolderPath()
-
-      const updatedFiles = files.map((file) => {
-        const updatedPath = joinPaths(basePath, file.path!)
-        const updatedFile = new File([file], file.name, {
-          lastModified: file.lastModified,
-          type: file.type
+      try {
+        setIsSubmitting(true)
+
+        const basePath = getCurrentFolderPath()
+
+        const updatedFiles = files.map((file) => {
+          const updatedPath = joinPaths(basePath, file.path!)
+          const updatedFile = new File([file], file.name, {
+            lastModified: file.lastModified,
+            type: file.type
+          })
+          Object.defineProperty(updatedFile, 'path', { value: updatedPath })
+          return updatedFile as FileWithPath
         })
-        Object.defineProperty(updatedFile, 'path', { value: updatedPath })
-        return updatedFile as FileWithPath
-      })
 
-      await addFiles({
-        files: updatedFiles,
-        id: id!,
-        message: data.commit,
-        name: userRepo.name,
-        owner: address!,
-        defaultBranch: userRepo.defaultBranch || 'master'
-      })
+        await addFiles({
+          files: updatedFiles,
+          id: id!,
+          message: data.commit,
+          name: userRepo.name,
+          owner: address!,
+          defaultBranch: userRepo.defaultBranch || 'master'
+        })
 
-      await reloadFilesOnCurrentFolder()
+        await reloadFilesOnCurrentFolder()
 
+        closeModal()
+      } catch (error) {
+        toast.error(`Failed to upload new file${files.length > 1 ? 's' : ''}.`)
+      }
       setIsSubmitting(false)
-      closeModal()
     } else {
       toast.error('Please select atleast one file.')
     }
diff --git a/src/pages/repository/components/tabs/code-tab/header/NewBranchModal.tsx b/src/pages/repository/components/tabs/code-tab/header/NewBranchModal.tsx
index caffd645..2055797f 100644
--- a/src/pages/repository/components/tabs/code-tab/header/NewBranchModal.tsx
+++ b/src/pages/repository/components/tabs/code-tab/header/NewBranchModal.tsx
@@ -53,6 +53,7 @@ export default function NewBranchModal({ setIsOpen, isOpen, addNewBranch }: NewB
   })
 
   function closeModal() {
+    if (isSubmitting) return
     setIsOpen(false)
   }
 
diff --git a/src/stores/issues/index.ts b/src/stores/issues/index.ts
index 91ed60ec..cc4b9950 100644
--- a/src/stores/issues/index.ts
+++ b/src/stores/issues/index.ts
@@ -374,6 +374,7 @@ const createPullRequestSlice: StateCreator<CombinedSlices, [['zustand/immer', ne
           bounty_amount: amount,
           result: 'FAILED'
         })
+        throw error
       }
     },
     closeBounty: async (issueId, bountyId) => {
@@ -403,6 +404,8 @@ const createPullRequestSlice: StateCreator<CombinedSlices, [['zustand/immer', ne
           bounty_id: bountyId,
           result: 'SUCCESS'
         })
+      } else {
+        throw error
       }
     },
     expireBounty: async (issueId, bountyId) => {
@@ -462,6 +465,8 @@ const createPullRequestSlice: StateCreator<CombinedSlices, [['zustand/immer', ne
           payment_tx: paymentTxId,
           result: 'SUCCESS'
         })
+      } else {
+        throw error
       }
     }
   }

From 509483ec2b8d30b6a1ed404bd8b929d5bf1198e0 Mon Sep 17 00:00:00 2001
From: Pawan Paudel <pawanpaudel93@gmail.com>
Date: Mon, 29 Apr 2024 11:11:11 +0545
Subject: [PATCH 2/2] refactor: Add cursor not allowded style & disable input
 on submitting modal form

---
 .../DragonDeploy/ArNSUpdateModal.tsx          | 12 +++++----
 src/components/DragonDeploy/DragonDeploy.tsx  |  9 ++++---
 src/helpers/hooks/useCursorNotAllowded.ts     |  7 +++++
 src/pages/home/components/NewRepoModal.tsx    | 27 ++++++++++++++-----
 .../issue/read/tabs/bounty/NewBountyModal.tsx | 16 +++++++----
 .../read/tabs/bounty/ReadBountyModal.tsx      | 16 +++++++----
 src/pages/repository/components/ForkModal.tsx | 16 +++++++----
 .../tabs/code-tab/CommitFilesModal.tsx        | 12 ++++++---
 .../tabs/code-tab/header/AddFilesModal.tsx    | 20 +++++++++-----
 .../tabs/code-tab/header/NewBranchModal.tsx   | 12 ++++++---
 10 files changed, 102 insertions(+), 45 deletions(-)
 create mode 100644 src/helpers/hooks/useCursorNotAllowded.ts

diff --git a/src/components/DragonDeploy/ArNSUpdateModal.tsx b/src/components/DragonDeploy/ArNSUpdateModal.tsx
index 9cb68abe..354fa0a4 100644
--- a/src/components/DragonDeploy/ArNSUpdateModal.tsx
+++ b/src/components/DragonDeploy/ArNSUpdateModal.tsx
@@ -7,6 +7,7 @@ import SVG from 'react-inlinesvg'
 
 import CloseCrossIcon from '@/assets/icons/close-cross.svg'
 import { Button } from '@/components/common/buttons'
+import useCursorNotAllowed from '@/helpers/hooks/useCursorNotAllowded'
 import { withAsync } from '@/helpers/withAsync'
 import { getANT, getDomainStatus, updateArNSDomain } from '@/lib/dragondeploy/arns'
 import { useGlobalStore } from '@/stores/globalStore'
@@ -19,7 +20,7 @@ export default function ArNSDomainModal() {
   const [isLoading, setIsLoading] = useState(false)
   const [domainTxId, setDomainTxId] = useState('')
   const [intervalValue, setIntervalValue] = useState<number>()
-
+  const { cursorNotAllowed, closeModalCursor } = useCursorNotAllowed(isLoading)
   const [connectedAddress, selectedRepo, updateDomain] = useGlobalStore((state) => [
     state.authState.address,
     state.repoCoreState.selectedRepo.repo,
@@ -146,7 +147,7 @@ export default function ArNSDomainModal() {
         ArNS Domain
       </Button>
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+        <Dialog as="div" className={clsx('relative z-10', cursorNotAllowed)} onClose={closeModal}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -175,7 +176,7 @@ export default function ArNSDomainModal() {
                     <Dialog.Title as="h3" className="text-xl font-medium text-gray-900">
                       ArNS Domain
                     </Dialog.Title>
-                    <SVG onClick={closeModal} src={CloseCrossIcon} className="w-6 h-6 cursor-pointer" />
+                    <SVG onClick={closeModal} src={CloseCrossIcon} className={clsx('w-6 h-6', closeModalCursor)} />
                   </div>
                   <Dialog.Description className="mt-4">
                     <div className="flex justify-center items-center w-full">
@@ -208,7 +209,7 @@ export default function ArNSDomainModal() {
                         <div className="flex flex-col gap-3 justify-center mt-6">
                           <div className="flex gap-2">
                             <Button
-                              className="w-full flex justify-center"
+                              className={clsx('w-full flex justify-center', cursorNotAllowed)}
                               variant="primary-solid"
                               isLoading={isLoading}
                               disabled={isLoading || !updateNeeded}
@@ -218,9 +219,10 @@ export default function ArNSDomainModal() {
                               Update
                             </Button>
                             <Button
-                              className="w-full flex justify-center"
+                              className={clsx('w-full flex justify-center', cursorNotAllowed)}
                               variant="secondary"
                               onClick={() => closeModal()}
+                              disabled={isLoading}
                             >
                               Cancel
                             </Button>
diff --git a/src/components/DragonDeploy/DragonDeploy.tsx b/src/components/DragonDeploy/DragonDeploy.tsx
index db132043..bde28894 100644
--- a/src/components/DragonDeploy/DragonDeploy.tsx
+++ b/src/components/DragonDeploy/DragonDeploy.tsx
@@ -1,4 +1,5 @@
 import { Dialog, Transition } from '@headlessui/react'
+import clsx from 'clsx'
 import { useEffect, useState } from 'react'
 import { Fragment } from 'react'
 import toast from 'react-hot-toast'
@@ -7,6 +8,7 @@ import SVG from 'react-inlinesvg'
 import CloseCrossIcon from '@/assets/icons/close-cross.svg'
 import { Button } from '@/components/common/buttons'
 import CostEstimatesToolTip from '@/components/CostEstimatesToolTip'
+import useCursorNotAllowed from '@/helpers/hooks/useCursorNotAllowded'
 import {
   type Commit,
   type File,
@@ -28,6 +30,7 @@ export default function DragonDeploy() {
   const [currentDeployment, setCurrentDeployment] = useState<Deployment>()
   const [uploadPercent, setUploadPercent] = useState(0)
   const [branchToRestore, setBranchToRestore] = useState('')
+  const { cursorNotAllowed, closeModalCursor } = useCursorNotAllowed(isDeploying)
   const [currentBranch, selectedRepo, branchState, branchActions, addDeployment] = useGlobalStore((state) => [
     state.branchState.currentBranch,
     state.repoCoreState.selectedRepo.repo,
@@ -116,7 +119,7 @@ export default function DragonDeploy() {
         Dragon Deploy
       </Button>
       <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+        <Dialog as="div" className={clsx('relative z-10', cursorNotAllowed)} onClose={closeModal}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -145,7 +148,7 @@ export default function DragonDeploy() {
                     <Dialog.Title as="h3" className="text-xl font-medium text-gray-900">
                       Dragon Deploy
                     </Dialog.Title>
-                    <SVG onClick={closeModal} src={CloseCrossIcon} className="w-6 h-6 cursor-pointer" />
+                    <SVG onClick={closeModal} src={CloseCrossIcon} className={clsx('w-6 h-6', closeModalCursor)} />
                   </div>
                   <Dialog.Description className="mt-4">
                     <div className="flex flex-col text-md gap-2">
@@ -189,7 +192,7 @@ export default function DragonDeploy() {
                       <Button
                         isLoading={isDeploying}
                         disabled={isDeploying || isProcessing || !!currentDeployment}
-                        className="w-full justify-center font-medium"
+                        className={clsx('w-full justify-center font-medium', cursorNotAllowed)}
                         onClick={deploy}
                         loadingText="Deploying"
                         variant="primary-solid"
diff --git a/src/helpers/hooks/useCursorNotAllowded.ts b/src/helpers/hooks/useCursorNotAllowded.ts
new file mode 100644
index 00000000..41bf0ae9
--- /dev/null
+++ b/src/helpers/hooks/useCursorNotAllowded.ts
@@ -0,0 +1,7 @@
+import clsx from 'clsx'
+
+export default function useCursorNotAllowed(isSubmitting: boolean) {
+  const cursorNotAllowed = clsx({ 'cursor-not-allowed': isSubmitting })
+  const closeModalCursor = isSubmitting ? 'cursor-not-allowed' : 'cursor-pointer'
+  return { cursorNotAllowed, closeModalCursor }
+}
diff --git a/src/pages/home/components/NewRepoModal.tsx b/src/pages/home/components/NewRepoModal.tsx
index f76a0906..b80b000d 100644
--- a/src/pages/home/components/NewRepoModal.tsx
+++ b/src/pages/home/components/NewRepoModal.tsx
@@ -13,6 +13,7 @@ import CloseCrossIcon from '@/assets/icons/close-cross.svg'
 import { Button } from '@/components/common/buttons'
 import CostEstimatesToolTip from '@/components/CostEstimatesToolTip'
 import { trackGoogleAnalyticsEvent } from '@/helpers/google-analytics'
+import useCursorNotAllowed from '@/helpers/hooks/useCursorNotAllowded'
 import { withAsync } from '@/helpers/withAsync'
 import { createNewRepo, postNewRepo } from '@/lib/git'
 import { fsWithName } from '@/lib/git/helpers/fsWithName'
@@ -41,6 +42,7 @@ export default function NewRepoModal({ setIsOpen, isOpen }: NewRepoModalProps) {
   const [isSubmitting, setIsSubmitting] = React.useState(false)
   const [visibility, setVisibility] = React.useState('public')
   const navigate = useNavigate()
+  const { cursorNotAllowed, closeModalCursor } = useCursorNotAllowed(isSubmitting)
   const [authState] = useGlobalStore((state) => [state.authState])
   const {
     register,
@@ -103,12 +105,13 @@ export default function NewRepoModal({ setIsOpen, isOpen }: NewRepoModalProps) {
   }
 
   function handleRepositoryVisibilityChange(event: ChangeEvent<HTMLInputElement>) {
+    if (isSubmitting) return
     setVisibility(event.target.value)
   }
 
   return (
     <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={closeModal}>
+      <Dialog as="div" className={clsx('relative z-10', cursorNotAllowed)} onClose={closeModal}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -137,7 +140,7 @@ export default function NewRepoModal({ setIsOpen, isOpen }: NewRepoModalProps) {
                   <Dialog.Title as="h3" className="text-xl font-medium text-gray-900">
                     Create a new Repository
                   </Dialog.Title>
-                  <SVG onClick={closeModal} src={CloseCrossIcon} className="w-6 h-6 cursor-pointer" />
+                  <SVG onClick={closeModal} src={CloseCrossIcon} className={clsx('w-6 h-6', closeModalCursor)} />
                 </div>
                 <div className="mt-6 flex flex-col gap-2.5">
                   <div>
@@ -149,9 +152,11 @@ export default function NewRepoModal({ setIsOpen, isOpen }: NewRepoModalProps) {
                       {...register('title')}
                       className={clsx(
                         'bg-white border-[1px] text-gray-900 text-base rounded-lg hover:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] focus:border-primary-500 focus:border-[1.5px] block w-full px-3 py-[10px] outline-none',
-                        errors.title ? 'border-red-500' : 'border-gray-300'
+                        errors.title ? 'border-red-500' : 'border-gray-300',
+                        cursorNotAllowed
                       )}
                       placeholder="my-cool-repo"
+                      disabled={isSubmitting}
                     />
                     {errors.title && <p className="text-red-500 text-sm italic mt-2">{errors.title?.message}</p>}
                   </div>
@@ -164,9 +169,11 @@ export default function NewRepoModal({ setIsOpen, isOpen }: NewRepoModalProps) {
                       {...register('description')}
                       className={clsx(
                         'bg-white border-[1px] text-gray-900 text-base rounded-lg hover:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] focus:border-primary-500 focus:border-[1.5px] block w-full px-3 py-[10px] outline-none',
-                        errors.description ? 'border-red-500' : 'border-gray-300'
+                        errors.description ? 'border-red-500' : 'border-gray-300',
+                        cursorNotAllowed
                       )}
                       placeholder="A really cool repo fully decentralized"
+                      disabled={isSubmitting}
                     />
                     {errors.description && (
                       <p className="text-red-500 text-sm italic mt-2">{errors.description?.message}</p>
@@ -182,7 +189,10 @@ export default function NewRepoModal({ setIsOpen, isOpen }: NewRepoModalProps) {
                           onChange={handleRepositoryVisibilityChange}
                           value="public"
                           defaultChecked
-                          className="mr-2 rounded-full h-4 w-4 checked:accent-primary-700 accent-primary-600 bg-white focus:ring-primary-600  outline-none"
+                          className={clsx(
+                            'mr-2 rounded-full h-4 w-4 checked:accent-primary-700 accent-primary-600 bg-white focus:ring-primary-600  outline-none',
+                            cursorNotAllowed
+                          )}
                         />
                         Public
                       </label>
@@ -193,7 +203,10 @@ export default function NewRepoModal({ setIsOpen, isOpen }: NewRepoModalProps) {
                           disabled={authState.method === 'othent'}
                           onChange={handleRepositoryVisibilityChange}
                           value="private"
-                          className="mr-2 rounded-full h-4 w-4 checked:accent-primary-700 accent-primary-600 bg-white focus:ring-primary-600  outline-none"
+                          className={clsx(
+                            'mr-2 rounded-full h-4 w-4 checked:accent-primary-700 accent-primary-600 bg-white focus:ring-primary-600  outline-none',
+                            cursorNotAllowed
+                          )}
                         />
                         Private
                       </label>
@@ -208,7 +221,7 @@ export default function NewRepoModal({ setIsOpen, isOpen }: NewRepoModalProps) {
                   <Button
                     isLoading={isSubmitting}
                     disabled={Object.keys(errors).length > 0 || isSubmitting}
-                    className="w-full justify-center font-medium"
+                    className={clsx('w-full justify-center font-medium', cursorNotAllowed)}
                     onClick={handleSubmit(handleCreateBtnClick)}
                     variant="primary-solid"
                   >
diff --git a/src/pages/issue/read/tabs/bounty/NewBountyModal.tsx b/src/pages/issue/read/tabs/bounty/NewBountyModal.tsx
index 38172990..008604bf 100644
--- a/src/pages/issue/read/tabs/bounty/NewBountyModal.tsx
+++ b/src/pages/issue/read/tabs/bounty/NewBountyModal.tsx
@@ -10,6 +10,7 @@ import * as yup from 'yup'
 import ArweaveLogo from '@/assets/arweave.svg'
 import CloseCrossIcon from '@/assets/icons/close-cross.svg'
 import { Button } from '@/components/common/buttons'
+import useCursorNotAllowed from '@/helpers/hooks/useCursorNotAllowded'
 import { withAsync } from '@/helpers/withAsync'
 import { useGlobalStore } from '@/stores/globalStore'
 
@@ -37,6 +38,7 @@ export default function NewBountyModal({ isOpen, setIsOpen }: NewBountyModalProp
   const { issueId } = useParams()
   const [addBounty] = useGlobalStore((state) => [state.issuesActions.addBounty])
   const [isSubmitting, setIsSubmitting] = React.useState(false)
+  const { cursorNotAllowed, closeModalCursor } = useCursorNotAllowed(isSubmitting)
   const {
     register,
     handleSubmit,
@@ -64,7 +66,7 @@ export default function NewBountyModal({ isOpen, setIsOpen }: NewBountyModalProp
 
   return (
     <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={closeModal}>
+      <Dialog as="div" className={clsx('relative z-10', cursorNotAllowed)} onClose={closeModal}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -93,7 +95,7 @@ export default function NewBountyModal({ isOpen, setIsOpen }: NewBountyModalProp
                   <Dialog.Title as="h3" className="text-xl font-medium text-gray-900">
                     Add bounty
                   </Dialog.Title>
-                  <SVG onClick={closeModal} src={CloseCrossIcon} className="w-6 h-6 cursor-pointer" />
+                  <SVG onClick={closeModal} src={CloseCrossIcon} className={clsx('w-6 h-6', closeModalCursor)} />
                 </div>
                 <div className="mt-6 flex flex-col gap-2.5">
                   <div className="flex flex-col gap-1">
@@ -117,12 +119,14 @@ export default function NewBountyModal({ isOpen, setIsOpen }: NewBountyModalProp
                         {...register('amount')}
                         className={clsx(
                           'bg-white border-[1px] text-gray-900 text-base rounded-lg hover:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] focus:border-primary-500 focus:border-[1.5px] block w-full px-3 py-[10px] outline-none',
-                          errors.amount ? 'border-red-500' : 'border-gray-300'
+                          errors.amount ? 'border-red-500' : 'border-gray-300',
+                          cursorNotAllowed
                         )}
                         step="0.5"
                         type="number"
                         placeholder="2"
                         min={'0'}
+                        disabled={isSubmitting}
                       />
                       <div className="h-full absolute right-4 top-0 flex items-center">
                         <span className="font-medium text-gray-600">AR</span>
@@ -139,11 +143,13 @@ export default function NewBountyModal({ isOpen, setIsOpen }: NewBountyModalProp
                         {...register('expiry')}
                         className={clsx(
                           'bg-white border-[1px] text-gray-900 text-base rounded-lg hover:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] focus:border-primary-500 focus:border-[1.5px] block w-full px-3 py-[10px] outline-none',
-                          errors.expiry ? 'border-red-500' : 'border-gray-300'
+                          errors.expiry ? 'border-red-500' : 'border-gray-300',
+                          cursorNotAllowed
                         )}
                         type="date"
                         min={new Date().toISOString().split('T')[0]}
                         placeholder="2"
+                        disabled={isSubmitting}
                       />
                     </div>
                     {errors.expiry && <p className="text-red-500 text-sm italic mt-2">{errors.expiry.message}</p>}
@@ -153,7 +159,7 @@ export default function NewBountyModal({ isOpen, setIsOpen }: NewBountyModalProp
                 <div className="mt-6">
                   <Button
                     disabled={Object.keys(errors).length > 0 || isSubmitting}
-                    className="w-full justify-center font-medium"
+                    className={clsx('w-full justify-center font-medium', cursorNotAllowed)}
                     onClick={handleSubmit(handleAddButtonClick)}
                     variant="primary-solid"
                     isLoading={isSubmitting}
diff --git a/src/pages/issue/read/tabs/bounty/ReadBountyModal.tsx b/src/pages/issue/read/tabs/bounty/ReadBountyModal.tsx
index 46698f0f..98fc3b3c 100644
--- a/src/pages/issue/read/tabs/bounty/ReadBountyModal.tsx
+++ b/src/pages/issue/read/tabs/bounty/ReadBountyModal.tsx
@@ -9,6 +9,7 @@ import { useParams } from 'react-router-dom'
 import ArweaveLogo from '@/assets/arweave.svg'
 import CloseCrossIcon from '@/assets/icons/close-cross.svg'
 import { Button } from '@/components/common/buttons'
+import useCursorNotAllowed from '@/helpers/hooks/useCursorNotAllowded'
 import { withAsync } from '@/helpers/withAsync'
 import { useGlobalStore } from '@/stores/globalStore'
 import { Bounty } from '@/types/repository'
@@ -37,6 +38,7 @@ export default function ReadBountyModal({ isOpen, setIsOpen, bounty, author }: N
     state.issuesActions.completeBounty
   ])
   const [isSubmitting, setIsSubmitting] = React.useState(false)
+  const { cursorNotAllowed, closeModalCursor } = useCursorNotAllowed(isSubmitting)
 
   async function handleCloseButtonClick() {
     setIsSubmitting(true)
@@ -65,7 +67,7 @@ export default function ReadBountyModal({ isOpen, setIsOpen, bounty, author }: N
 
   return (
     <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={closeModal}>
+      <Dialog as="div" className={clsx('relative z-10', cursorNotAllowed)} onClose={closeModal}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -94,7 +96,7 @@ export default function ReadBountyModal({ isOpen, setIsOpen, bounty, author }: N
                   <Dialog.Title as="h3" className="text-xl font-medium text-gray-900">
                     Reward#{bounty.id}
                   </Dialog.Title>
-                  <SVG onClick={closeModal} src={CloseCrossIcon} className="w-6 h-6 cursor-pointer" />
+                  <SVG onClick={closeModal} src={CloseCrossIcon} className={clsx('w-6 h-6', closeModalCursor)} />
                 </div>
                 <div className="mt-6 flex flex-col gap-4">
                   <div className="flex flex-col gap-1">
@@ -117,7 +119,8 @@ export default function ReadBountyModal({ isOpen, setIsOpen, bounty, author }: N
                       <input
                         className={clsx(
                           'bg-white border-[1px] text-gray-900 text-base rounded-lg hover:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] focus:border-primary-500 focus:border-[1.5px] block w-full px-3 py-[10px] outline-none',
-                          'border-gray-300'
+                          'border-gray-300',
+                          cursorNotAllowed
                         )}
                         value={bounty.amount}
                         type="number"
@@ -151,6 +154,7 @@ export default function ReadBountyModal({ isOpen, setIsOpen, bounty, author }: N
                         value=""
                         id="checkboxChecked"
                         onChange={(evt) => setBountyComplete(evt.target.checked)}
+                        disabled={isSubmitting}
                       />
                       Mark this bounty complete?
                     </div>
@@ -159,18 +163,20 @@ export default function ReadBountyModal({ isOpen, setIsOpen, bounty, author }: N
                         <input
                           className={clsx(
                             'bg-white border-[1px] text-gray-900 text-base rounded-lg hover:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] focus:border-primary-500 focus:border-[1.5px] block w-full px-3 py-[10px] outline-none',
-                            'border-gray-300'
+                            'border-gray-300',
+                            cursorNotAllowed
                           )}
                           type="text"
                           placeholder="Payment TX ID"
                           onChange={(evt) => setPayTxId(evt.target.value)}
+                          disabled={isSubmitting}
                         />
                       </div>
                     )}
                     <div className="flex w-full gap-4">
                       <Button
                         disabled={(bountyComplete && payTxId.length === 0) || isSubmitting}
-                        className="justify-center w-full"
+                        className={clsx('justify-center w-full', cursorNotAllowed)}
                         onClick={handleCloseButtonClick}
                         variant="primary-solid"
                         isLoading={isSubmitting}
diff --git a/src/pages/repository/components/ForkModal.tsx b/src/pages/repository/components/ForkModal.tsx
index be281aa9..433e17fe 100644
--- a/src/pages/repository/components/ForkModal.tsx
+++ b/src/pages/repository/components/ForkModal.tsx
@@ -10,6 +10,7 @@ import * as yup from 'yup'
 
 import CloseCrossIcon from '@/assets/icons/close-cross.svg'
 import { Button } from '@/components/common/buttons'
+import useCursorNotAllowed from '@/helpers/hooks/useCursorNotAllowded'
 import { withAsync } from '@/helpers/withAsync'
 import { createNewFork } from '@/lib/git'
 import { useGlobalStore } from '@/stores/globalStore'
@@ -39,6 +40,7 @@ export default function ForkModal({ setIsOpen, isOpen, repo }: NewRepoModalProps
   const [isSubmitting, setIsSubmitting] = React.useState(false)
   const connectedAddress = useGlobalStore((state) => state.authState.address)
   const navigate = useNavigate()
+  const { cursorNotAllowed, closeModalCursor } = useCursorNotAllowed(isSubmitting)
   const {
     register,
     handleSubmit,
@@ -106,7 +108,7 @@ export default function ForkModal({ setIsOpen, isOpen, repo }: NewRepoModalProps
 
   return (
     <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={closeModal}>
+      <Dialog as="div" className={clsx('relative z-10', cursorNotAllowed)} onClose={closeModal}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -135,7 +137,7 @@ export default function ForkModal({ setIsOpen, isOpen, repo }: NewRepoModalProps
                   <Dialog.Title as="h3" className="text-xl font-medium text-gray-900">
                     Create a new Fork
                   </Dialog.Title>
-                  <SVG onClick={closeModal} src={CloseCrossIcon} className="w-6 h-6 cursor-pointer" />
+                  <SVG onClick={closeModal} src={CloseCrossIcon} className={clsx('w-6 h-6', closeModalCursor)} />
                 </div>
                 <div className="mt-6 flex flex-col gap-2.5">
                   <div>
@@ -147,9 +149,11 @@ export default function ForkModal({ setIsOpen, isOpen, repo }: NewRepoModalProps
                       {...register('title')}
                       className={clsx(
                         'bg-white border-[1px] text-gray-900 text-base rounded-lg hover:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] focus:border-primary-500 focus:border-[1.5px] block w-full px-3 py-[10px] outline-none',
-                        errors.title ? 'border-red-500' : 'border-gray-300'
+                        errors.title ? 'border-red-500' : 'border-gray-300',
+                        cursorNotAllowed
                       )}
                       placeholder="my-cool-repo"
+                      disabled={isSubmitting}
                     />
                     {errors.title && <p className="text-red-500 text-sm italic mt-2">{errors.title?.message}</p>}
                   </div>
@@ -162,9 +166,11 @@ export default function ForkModal({ setIsOpen, isOpen, repo }: NewRepoModalProps
                       {...register('description')}
                       className={clsx(
                         'bg-white border-[1px] text-gray-900 text-base rounded-lg hover:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] focus:border-primary-500 focus:border-[1.5px] block w-full px-3 py-[10px] outline-none',
-                        errors.description ? 'border-red-500' : 'border-gray-300'
+                        errors.description ? 'border-red-500' : 'border-gray-300',
+                        cursorNotAllowed
                       )}
                       placeholder="A really cool repo fully decentralized"
+                      disabled={isSubmitting}
                     />
                     {errors.description && (
                       <p className="text-red-500 text-sm italic mt-2">{errors.description?.message}</p>
@@ -176,7 +182,7 @@ export default function ForkModal({ setIsOpen, isOpen, repo }: NewRepoModalProps
                   <Button
                     isLoading={isSubmitting}
                     disabled={Object.keys(errors).length > 0 || isSubmitting}
-                    className="w-full justify-center font-medium"
+                    className={clsx('w-full justify-center font-medium', cursorNotAllowed)}
                     onClick={handleSubmit(handleCreateFork)}
                     variant="primary-solid"
                   >
diff --git a/src/pages/repository/components/tabs/code-tab/CommitFilesModal.tsx b/src/pages/repository/components/tabs/code-tab/CommitFilesModal.tsx
index eea790c0..97e68360 100644
--- a/src/pages/repository/components/tabs/code-tab/CommitFilesModal.tsx
+++ b/src/pages/repository/components/tabs/code-tab/CommitFilesModal.tsx
@@ -12,6 +12,7 @@ import * as yup from 'yup'
 import CloseCrossIcon from '@/assets/icons/close-cross.svg'
 import { Button } from '@/components/common/buttons'
 import CostEstimatesToolTip from '@/components/CostEstimatesToolTip'
+import useCursorNotAllowed from '@/helpers/hooks/useCursorNotAllowded'
 import { withAsync } from '@/helpers/withAsync'
 import { fsWithName } from '@/lib/git/helpers/fsWithName'
 import { packGitRepo } from '@/lib/git/helpers/zipUtils'
@@ -53,6 +54,7 @@ export default function CommitFilesModal({ setIsOpen, setIsCommited, isOpen, fil
   const [fileSizes, setFileSizes] = React.useState<number[]>([])
   const [repoBlobSize, setRepoBlobSize] = React.useState<number>(0)
   const [isSubmitting, setIsSubmitting] = React.useState(false)
+  const { cursorNotAllowed, closeModalCursor } = useCursorNotAllowed(isSubmitting)
 
   React.useEffect(() => {
     if (files.length > 0) {
@@ -108,7 +110,7 @@ export default function CommitFilesModal({ setIsOpen, setIsCommited, isOpen, fil
 
   return (
     <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={closeModal}>
+      <Dialog as="div" className={clsx('relative z-10', cursorNotAllowed)} onClose={closeModal}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -137,7 +139,7 @@ export default function CommitFilesModal({ setIsOpen, setIsCommited, isOpen, fil
                   <Dialog.Title as="h3" className="text-xl font-medium text-gray-900">
                     Commit changes
                   </Dialog.Title>
-                  <SVG onClick={closeModal} src={CloseCrossIcon} className="w-6 h-6 cursor-pointer" />
+                  <SVG onClick={closeModal} src={CloseCrossIcon} className={clsx('w-6 h-6', closeModalCursor)} />
                 </div>
                 <div className="mt-3 flex flex-col">
                   <div>
@@ -149,9 +151,11 @@ export default function CommitFilesModal({ setIsOpen, setIsCommited, isOpen, fil
                       {...register('commit')}
                       className={clsx(
                         'bg-white border-[1px] text-gray-900 text-base rounded-lg hover:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] focus:border-primary-500 focus:border-[1.5px] block w-full px-3 py-[10px] outline-none',
-                        errors.commit ? 'border-red-500' : 'border-gray-300'
+                        errors.commit ? 'border-red-500' : 'border-gray-300',
+                        cursorNotAllowed
                       )}
                       placeholder="Example: Add README.md file"
+                      disabled={isSubmitting}
                     />
                     {errors.commit && <p className="text-red-500 text-sm italic mt-2">{errors.commit?.message}</p>}
                   </div>
@@ -163,7 +167,7 @@ export default function CommitFilesModal({ setIsOpen, setIsCommited, isOpen, fil
                   <Button
                     disabled={Object.keys(errors).length > 0 || isSubmitting}
                     isLoading={isSubmitting}
-                    className="w-full justify-center font-medium"
+                    className={clsx('w-full justify-center font-medium', cursorNotAllowed)}
                     onClick={handleSubmit(handleCommitSubmit)}
                     variant="primary-solid"
                   >
diff --git a/src/pages/repository/components/tabs/code-tab/header/AddFilesModal.tsx b/src/pages/repository/components/tabs/code-tab/header/AddFilesModal.tsx
index 89ae9d5d..0aa74c42 100644
--- a/src/pages/repository/components/tabs/code-tab/header/AddFilesModal.tsx
+++ b/src/pages/repository/components/tabs/code-tab/header/AddFilesModal.tsx
@@ -13,6 +13,7 @@ import CloseCrossIcon from '@/assets/icons/close-cross.svg'
 import FolderBrowseIcon from '@/assets/icons/folder-browse.svg'
 import { Button } from '@/components/common/buttons'
 import CostEstimatesToolTip from '@/components/CostEstimatesToolTip'
+import useCursorNotAllowed from '@/helpers/hooks/useCursorNotAllowded'
 import { fsWithName } from '@/lib/git/helpers/fsWithName'
 import { packGitRepo } from '@/lib/git/helpers/zipUtils'
 import useCommit from '@/pages/repository/hooks/useCommit'
@@ -51,7 +52,7 @@ export default function AddFilesModal({ setIsOpen, isOpen }: NewBranchModal) {
   const [fileSizes, setFileSizes] = React.useState<number[]>([])
   const [repoBlobSize, setRepoBlobSize] = React.useState<number>(0)
   const [isSubmitting, setIsSubmitting] = React.useState(false)
-
+  const { cursorNotAllowed, closeModalCursor } = useCursorNotAllowed(isSubmitting)
   const { getRootProps, getInputProps, isDragActive, inputRef } = useDropzone({ onDrop })
 
   React.useEffect(() => {
@@ -126,7 +127,7 @@ export default function AddFilesModal({ setIsOpen, isOpen }: NewBranchModal) {
 
   return (
     <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={closeModal}>
+      <Dialog as="div" className={clsx('relative z-10', cursorNotAllowed)} onClose={closeModal}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -155,15 +156,18 @@ export default function AddFilesModal({ setIsOpen, isOpen }: NewBranchModal) {
                   <Dialog.Title as="h3" className="text-xl font-medium text-gray-900">
                     Upload new Files/Folders
                   </Dialog.Title>
-                  <SVG onClick={closeModal} src={CloseCrossIcon} className="w-6 h-6 cursor-pointer" />
+                  <SVG onClick={closeModal} src={CloseCrossIcon} className={clsx('w-6 h-6', closeModalCursor)} />
                 </div>
                 <div className="mt-6 flex flex-col">
                   <span className="mb-2 font-medium text-sm text-gray-600">Upload files</span>
                   <div
-                    className="flex cursor-pointer flex-col overflow-auto items-center h-36 max-h-36 border-[1px] border-gray-300 rounded-lg border-dashed"
+                    className={clsx(
+                      'flex flex-col overflow-auto items-center h-36 max-h-36 border-[1px] border-gray-300 rounded-lg border-dashed',
+                      closeModalCursor
+                    )}
                     {...getRootProps()}
                   >
-                    <input {...getInputProps()} />
+                    <input {...getInputProps()} disabled={isSubmitting} />
                     {files.length === 0 && (
                       <div className="h-full w-full py-6 px-12 flex justify-center items-center">
                         {!isDragActive && (
@@ -206,9 +210,11 @@ export default function AddFilesModal({ setIsOpen, isOpen }: NewBranchModal) {
                       {...register('commit')}
                       className={clsx(
                         'bg-white border-[1px] text-gray-900 text-base rounded-lg hover:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] focus:border-primary-500 focus:border-[1.5px] block w-full px-3 py-[10px] outline-none',
-                        errors.commit ? 'border-red-500' : 'border-gray-300'
+                        errors.commit ? 'border-red-500' : 'border-gray-300',
+                        cursorNotAllowed
                       )}
                       placeholder="Example: Add README.md file"
+                      disabled={isSubmitting}
                     />
                     {errors.commit && <p className="text-red-500 text-sm italic mt-2">{errors.commit?.message}</p>}
                   </div>
@@ -220,7 +226,7 @@ export default function AddFilesModal({ setIsOpen, isOpen }: NewBranchModal) {
                   <Button
                     disabled={Object.keys(errors).length > 0 || isSubmitting}
                     isLoading={isSubmitting}
-                    className="w-full justify-center font-medium"
+                    className={clsx('w-full justify-center font-medium', cursorNotAllowed)}
                     onClick={handleSubmit(handleCommitSubmit)}
                     variant="primary-solid"
                   >
diff --git a/src/pages/repository/components/tabs/code-tab/header/NewBranchModal.tsx b/src/pages/repository/components/tabs/code-tab/header/NewBranchModal.tsx
index 2055797f..4a68de0d 100644
--- a/src/pages/repository/components/tabs/code-tab/header/NewBranchModal.tsx
+++ b/src/pages/repository/components/tabs/code-tab/header/NewBranchModal.tsx
@@ -11,6 +11,7 @@ import * as yup from 'yup'
 
 import CloseCrossIcon from '@/assets/icons/close-cross.svg'
 import { Button } from '@/components/common/buttons'
+import useCursorNotAllowed from '@/helpers/hooks/useCursorNotAllowded'
 import { withAsync } from '@/helpers/withAsync'
 import { rootTabConfig } from '@/pages/repository/config/rootTabConfig'
 
@@ -43,6 +44,7 @@ export default function NewBranchModal({ setIsOpen, isOpen, addNewBranch }: NewB
   const { id } = useParams()
   const navigate = useNavigate()
   const [isSubmitting, setIsSubmitting] = React.useState(false)
+  const { cursorNotAllowed, closeModalCursor } = useCursorNotAllowed(isSubmitting)
   const {
     register,
     handleSubmit,
@@ -101,7 +103,7 @@ export default function NewBranchModal({ setIsOpen, isOpen, addNewBranch }: NewB
 
   return (
     <Transition appear show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={closeModal}>
+      <Dialog as="div" className={clsx('relative z-10', cursorNotAllowed)} onClose={closeModal}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -130,7 +132,7 @@ export default function NewBranchModal({ setIsOpen, isOpen, addNewBranch }: NewB
                   <Dialog.Title as="h3" className="text-xl font-medium text-gray-900">
                     Create a new Branch
                   </Dialog.Title>
-                  <SVG onClick={closeModal} src={CloseCrossIcon} className="w-6 h-6 cursor-pointer" />
+                  <SVG onClick={closeModal} src={CloseCrossIcon} className={clsx('w-6 h-6', closeModalCursor)} />
                 </div>
                 <div className="mt-6 flex flex-col gap-2.5">
                   <div>
@@ -142,9 +144,11 @@ export default function NewBranchModal({ setIsOpen, isOpen, addNewBranch }: NewB
                       {...register('name')}
                       className={clsx(
                         'bg-white border-[1px] text-gray-900 text-base rounded-lg hover:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.10)] focus:border-primary-500 focus:border-[1.5px] block w-full px-3 py-[10px] outline-none',
-                        errors.name ? 'border-red-500' : 'border-gray-300'
+                        errors.name ? 'border-red-500' : 'border-gray-300',
+                        cursorNotAllowed
                       )}
                       placeholder="feature/my-cool-feature"
+                      disabled={isSubmitting}
                     />
                     {errors.name && <p className="text-red-500 text-sm italic mt-2">{errors.name?.message}</p>}
                   </div>
@@ -153,7 +157,7 @@ export default function NewBranchModal({ setIsOpen, isOpen, addNewBranch }: NewB
                 <div className="mt-6">
                   <Button
                     disabled={Object.keys(errors).length > 0 || isSubmitting}
-                    className="w-full justify-center font-medium text-base"
+                    className={clsx('w-full justify-center font-medium text-base', cursorNotAllowed)}
                     onClick={handleSubmit(handleCreateBtnClick)}
                     variant="primary-solid"
                     isLoading={isSubmitting}