diff --git a/app/src/components/blocks/_delete/deleteSubmitStage/DeleteSubmitStage.test.tsx b/app/src/components/blocks/_delete/deleteSubmitStage/DeleteSubmitStage.test.tsx
index a9e39ed2e..782ebcb3a 100644
--- a/app/src/components/blocks/_delete/deleteSubmitStage/DeleteSubmitStage.test.tsx
+++ b/app/src/components/blocks/_delete/deleteSubmitStage/DeleteSubmitStage.test.tsx
@@ -13,6 +13,7 @@ import usePatient from '../../../../helpers/hooks/usePatient';
 import { runAxeTest } from '../../../../helpers/test/axeTestHelper';
 import { MemoryHistory, createMemoryHistory } from 'history';
 import * as ReactRouter from 'react-router';
+import waitForSeconds from '../../../../helpers/utils/waitForSeconds';
 
 jest.mock('../../../../helpers/hooks/useConfig');
 jest.mock('../deleteResultStage/DeleteResultStage', () => () => <div>Deletion complete</div>);
@@ -44,8 +45,6 @@ const mockPatientDetails = buildPatientDetails();
 const mockLgSearchResult = buildLgSearchResult();
 
 const mockSetStage = jest.fn();
-const mockSetIsDeletingDocuments = jest.fn();
-const mockSetDownloadStage = jest.fn();
 
 describe('DeleteSubmitStage', () => {
     beforeEach(() => {
@@ -261,6 +260,22 @@ describe('DeleteSubmitStage', () => {
                 ),
             ).toBeInTheDocument();
         });
+
+        it('change the button to spinner button when deletion is taken place in background', async () => {
+            mockedUseRole.mockReturnValue(REPOSITORY_ROLE.GP_ADMIN);
+            mockedAxios.delete.mockReturnValue(waitForSeconds(1));
+
+            renderComponent(DOCUMENT_TYPE.LLOYD_GEORGE, history);
+
+            act(() => {
+                userEvent.click(screen.getByRole('radio', { name: 'Yes' }));
+                userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+            });
+
+            await waitFor(() => {
+                expect(screen.getByTestId('delete-submit-spinner-btn')).toBeInTheDocument();
+            });
+        });
     });
 
     describe('Accessibility', () => {
@@ -325,7 +340,7 @@ describe('Navigation', () => {
 });
 
 const renderComponent = (docType: DOCUMENT_TYPE, history: MemoryHistory) => {
-    const props: Omit<Props, 'setStage' | 'setIsDeletingDocuments' | 'setDownloadStage'> = {
+    const props: Omit<Props, 'setStage' | 'setDownloadStage'> = {
         numberOfFiles: mockLgSearchResult.number_of_files,
         docType,
         recordType: docType.toString(),
@@ -333,7 +348,7 @@ const renderComponent = (docType: DOCUMENT_TYPE, history: MemoryHistory) => {
 
     return render(
         <ReactRouter.Router navigator={history} location={history.location}>
-            <DeleteSubmitStage {...props} setIsDeletingDocuments={mockSetIsDeletingDocuments} />,
+            <DeleteSubmitStage {...props} />,
         </ReactRouter.Router>,
     );
 };
diff --git a/app/src/components/blocks/_delete/deleteSubmitStage/DeleteSubmitStage.tsx b/app/src/components/blocks/_delete/deleteSubmitStage/DeleteSubmitStage.tsx
index 02b42a07c..6722b62ee 100644
--- a/app/src/components/blocks/_delete/deleteSubmitStage/DeleteSubmitStage.tsx
+++ b/app/src/components/blocks/_delete/deleteSubmitStage/DeleteSubmitStage.tsx
@@ -30,7 +30,6 @@ import DeleteResultStage from '../deleteResultStage/DeleteResultStage';
 export type Props = {
     docType: DOCUMENT_TYPE;
     numberOfFiles: number;
-    setIsDeletingDocuments?: Dispatch<boolean>;
     setDownloadStage?: Dispatch<SetStateAction<DOWNLOAD_STAGE>>;
     recordType: string;
 };
@@ -40,13 +39,7 @@ enum DELETE_DOCUMENTS_OPTION {
     NO = 'no',
 }
 
-function DeleteSubmitStage({
-    docType,
-    numberOfFiles,
-    setIsDeletingDocuments,
-    setDownloadStage,
-    recordType,
-}: Props) {
+function DeleteSubmitStage({ docType, numberOfFiles, setDownloadStage, recordType }: Props) {
     const patientDetails = usePatient();
     const role = useRole();
     const { register, handleSubmit } = useForm();
@@ -73,6 +66,7 @@ function DeleteSubmitStage({
             }
         };
         try {
+            setDeletionStage(SUBMISSION_STATE.PENDING);
             const response: DeleteResponse = await deleteAllDocuments({
                 docType: docType,
                 nhsNumber: nhsNumber,
@@ -177,7 +171,12 @@ function DeleteSubmitStage({
                     </Radios>
                 </Fieldset>
                 {deletionStage === SUBMISSION_STATE.PENDING ? (
-                    <SpinnerButton id="delete-docs-spinner" status="Deleting..." disabled={true} />
+                    <SpinnerButton
+                        id="delete-docs-spinner"
+                        dataTestId="delete-submit-spinner-btn"
+                        status="Deleting..."
+                        disabled={true}
+                    />
                 ) : (
                     <Button type="submit" id="delete-submit-button" data-testid="delete-submit-btn">
                         Continue
diff --git a/app/src/pages/documentSearchResultsPage/DocumentSearchResultsPage.tsx b/app/src/pages/documentSearchResultsPage/DocumentSearchResultsPage.tsx
index 9021ecaf7..b77c8195b 100644
--- a/app/src/pages/documentSearchResultsPage/DocumentSearchResultsPage.tsx
+++ b/app/src/pages/documentSearchResultsPage/DocumentSearchResultsPage.tsx
@@ -152,7 +152,6 @@ function DocumentSearchResultsPage() {
                             <DeleteSubmitStage
                                 recordType="ARF"
                                 numberOfFiles={searchResults.length}
-                                setIsDeletingDocuments={setIsDeletingDocuments}
                                 docType={DOCUMENT_TYPE.ALL}
                             />
                         }