diff --git a/awx/ui_next/src/components/DeleteButton/DeleteButton.jsx b/awx/ui_next/src/components/DeleteButton/DeleteButton.jsx
index f9fe6cb1ea..383d5fab97 100644
--- a/awx/ui_next/src/components/DeleteButton/DeleteButton.jsx
+++ b/awx/ui_next/src/components/DeleteButton/DeleteButton.jsx
@@ -11,6 +11,7 @@ function DeleteButton({
   i18n,
   variant,
   children,
+  isDisabled,
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -19,6 +20,7 @@ function DeleteButton({
       <Button
         variant={variant || 'danger'}
         aria-label={i18n._(t`Delete`)}
+        isDisabled={isDisabled}
         onClick={() => setIsOpen(true)}
       >
         {children || i18n._(t`Delete`)}
@@ -33,6 +35,7 @@ function DeleteButton({
             key="delete"
             variant="danger"
             aria-label={i18n._(t`Delete`)}
+            isDisabled={isDisabled}
             onClick={onConfirm}
           >
             {i18n._(t`Delete`)}
diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
index dbba89012b..e369d3467b 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useState, useEffect } from 'react';
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
 import { Link, useHistory, useParams } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import {
@@ -29,6 +29,7 @@ import ErrorDetail from '../../../components/ErrorDetail';
 import LaunchButton from '../../../components/LaunchButton';
 import { VariablesDetail } from '../../../components/CodeMirrorInput';
 import { JobTemplatesAPI } from '../../../api';
+import useRequest, { useDismissableError } from '../../../util/useRequest';
 
 function JobTemplateDetail({ i18n, template }) {
   const {
@@ -59,7 +60,6 @@ function JobTemplateDetail({ i18n, template }) {
     webhook_key,
   } = template;
   const [contentError, setContentError] = useState(null);
-  const [deletionError, setDeletionError] = useState(null);
   const [hasContentLoading, setHasContentLoading] = useState(false);
   const [instanceGroups, setInstanceGroups] = useState([]);
   const { id: templateId } = useParams();
@@ -82,16 +82,18 @@ function JobTemplateDetail({ i18n, template }) {
     })();
   }, [templateId]);
 
-  const handleDelete = async () => {
-    setHasContentLoading(true);
-    try {
+  const {
+    request: deleteJobTemplate,
+    isLoading,
+    error: deleteError,
+  } = useRequest(
+    useCallback(async () => {
       await JobTemplatesAPI.destroy(templateId);
       history.push(`/templates`);
-    } catch (error) {
-      setDeletionError(error);
-    }
-    setHasContentLoading(false);
-  };
+    }, [templateId, history])
+  );
+
+  const { error, dismissError } = useDismissableError(deleteError);
 
   const canLaunch =
     summary_fields.user_capabilities && summary_fields.user_capabilities.start;
@@ -386,22 +388,23 @@ function JobTemplateDetail({ i18n, template }) {
             <DeleteButton
               name={name}
               modalTitle={i18n._(t`Delete Job Template`)}
-              onConfirm={handleDelete}
+              onConfirm={deleteJobTemplate}
+              isDisabled={isLoading}
             >
               {i18n._(t`Delete`)}
             </DeleteButton>
           )}
       </CardActionsRow>
       {/* Update delete modal to show dependencies https://github.com/ansible/awx/issues/5546 */}
-      {deletionError && (
+      {error && (
         <AlertModal
-          isOpen={deletionError}
+          isOpen={error}
           variant="error"
           title={i18n._(t`Error!`)}
-          onClose={() => setDeletionError(null)}
+          onClose={dismissError}
         >
           {i18n._(t`Failed to delete job template.`)}
-          <ErrorDetail error={deletionError} />
+          <ErrorDetail error={error} />
         </AlertModal>
       )}
     </CardBody>
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
index ddbadb8b16..eb768ec5ca 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -17,7 +17,6 @@ import AlertModal from '../../../components/AlertModal';
 import { CardBody, CardActionsRow } from '../../../components/Card';
 import ChipGroup from '../../../components/ChipGroup';
 import { VariablesDetail } from '../../../components/CodeMirrorInput';
-import ContentLoading from '../../../components/ContentLoading';
 import DeleteButton from '../../../components/DeleteButton';
 import {
   DetailList,
@@ -28,6 +27,7 @@ import ErrorDetail from '../../../components/ErrorDetail';
 import LaunchButton from '../../../components/LaunchButton';
 import Sparkline from '../../../components/Sparkline';
 import { toTitleCase } from '../../../util/strings';
+import useRequest, { useDismissableError } from '../../../util/useRequest';
 
 function WorkflowJobTemplateDetail({ template, i18n }) {
   const {
@@ -48,9 +48,6 @@ function WorkflowJobTemplateDetail({ template, i18n }) {
   const urlOrigin = window.location.origin;
   const history = useHistory();
 
-  const [deletionError, setDeletionError] = useState(null);
-  const [hasContentLoading, setHasContentLoading] = useState(false);
-
   const renderOptionsField =
     template.allow_simultaneous || template.webhook_service;
 
@@ -69,20 +66,18 @@ function WorkflowJobTemplateDetail({ template, i18n }) {
     </TextList>
   );
 
-  if (hasContentLoading) {
-    return <ContentLoading />;
-  }
-
-  const handleDelete = async () => {
-    setHasContentLoading(true);
-    try {
+  const {
+    request: deleteWorkflowJobTemplate,
+    isLoading,
+    error: deleteError,
+  } = useRequest(
+    useCallback(async () => {
       await WorkflowJobTemplatesAPI.destroy(id);
       history.push(`/templates`);
-    } catch (error) {
-      setDeletionError(error);
-    }
-    setHasContentLoading(false);
-  };
+    }, [id, history])
+  );
+
+  const { error, dismissError } = useDismissableError(deleteError);
 
   const inventoryValue = (kind, inventoryId) => {
     const inventorykind = kind === 'smart' ? 'smart_inventory' : 'inventory';
@@ -226,21 +221,22 @@ function WorkflowJobTemplateDetail({ template, i18n }) {
             <DeleteButton
               name={name}
               modalTitle={i18n._(t`Delete Workflow Job Template`)}
-              onConfirm={handleDelete}
+              onConfirm={deleteWorkflowJobTemplate}
+              isDisabled={isLoading}
             >
               {i18n._(t`Delete`)}
             </DeleteButton>
           )}
       </CardActionsRow>
-      {deletionError && (
+      {error && (
         <AlertModal
-          isOpen={deletionError}
+          isOpen={error}
           variant="error"
           title={i18n._(t`Error!`)}
-          onClose={() => setDeletionError(null)}
+          onClose={dismissError}
         >
           {i18n._(t`Failed to delete workflow job template.`)}
-          <ErrorDetail error={deletionError} />
+          <ErrorDetail error={error} />
         </AlertModal>
       )}
     </CardBody>