From 79831d0460b2d81293bbbb7840263113326301f7 Mon Sep 17 00:00:00 2001
From: YANG YANG <yangyang@navapbc.com>
Date: Tue, 30 Mar 2021 17:35:35 -0400
Subject: [PATCH] Use loading button state after confirming docket switch
 (#16067)

Connects [CASEFLOW-1247](https://vajira.max.gov/browse/CASEFLOW-1247) and companion PR to #16055

### Description
This PR builds upon #16055 by adding a loading state to the Docket Switch confirmation page, and using that instead of disabled when awaiting confirmation, so that the user sees an animated loading button as they wait.

### Testing Plan
1. All tests still passing
2. To see a relevant feature test in action, put a `binding.pry` in `spec/feature/queue/docket_switch_spec.rb` around L348, which pauses the feature test right at the confirmation step.

### User Facing Changes
Screenshot of the loading state (which does not capture the fun little animated Caseflow logo) --

<img width="506" src="https://user-images.githubusercontent.com/282869/112910974-73747800-90c2-11eb-8b69-2d6427b1e09c.png">
---
 client/app/queue/docketSwitch/grant/CheckoutButtons.jsx     | 6 ++++--
 .../queue/docketSwitch/grant/DocketSwitchReviewConfirm.jsx  | 6 +++---
 .../grant/DocketSwitchReviewConfirmContainer.jsx            | 6 +++---
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/app/queue/docketSwitch/grant/CheckoutButtons.jsx b/client/app/queue/docketSwitch/grant/CheckoutButtons.jsx
index dc9f6632776..1e2816a9a0f 100644
--- a/client/app/queue/docketSwitch/grant/CheckoutButtons.jsx
+++ b/client/app/queue/docketSwitch/grant/CheckoutButtons.jsx
@@ -9,6 +9,7 @@ export const CheckoutButtons = ({
   onSubmit,
   submitText,
   disabled = false,
+  loading = false,
 }) => {
   const cancelBtn = {
     classNames: [cx('cf-btn-link', { 'cf-right-side': !onBack })],
@@ -23,13 +24,13 @@ export const CheckoutButtons = ({
     name: 'next-button',
     disabled,
     displayText: submitText ?? 'Continue',
+    loading,
     styling: css({ marginLeft: '1rem' }),
   };
   const backBtn = {
     classNames: ['cf-right-side', 'cf-prev-step', 'usa-button-secondary'],
     callback: onBack,
     name: 'back-button',
-    disabled,
     displayText: 'Back',
     willNeverBeLoading: true,
   };
@@ -38,13 +39,14 @@ export const CheckoutButtons = ({
     submitBtn,
     cancelBtn,
     // Only display "Back" button if applicable
-    ...(onBack ? [backBtn] : []),
+    ...(onBack && !loading ? [backBtn] : []),
   ]);
 
   return <DecisionViewFooter buttons={buttons} />;
 };
 CheckoutButtons.propTypes = {
   disabled: PropTypes.bool,
+  loading: PropTypes.bool,
   onBack: PropTypes.func,
   onCancel: PropTypes.func,
   onSubmit: PropTypes.func,
diff --git a/client/app/queue/docketSwitch/grant/DocketSwitchReviewConfirm.jsx b/client/app/queue/docketSwitch/grant/DocketSwitchReviewConfirm.jsx
index 3ecc57b8597..b4a907c4951 100644
--- a/client/app/queue/docketSwitch/grant/DocketSwitchReviewConfirm.jsx
+++ b/client/app/queue/docketSwitch/grant/DocketSwitchReviewConfirm.jsx
@@ -41,7 +41,7 @@ export const DocketSwitchReviewConfirm = ({
   onCancel,
   onBack,
   onSubmit,
-  disabled = false,
+  loading = false,
   originalReceiptDate,
   docketSwitchReceiptDate,
   issuesSwitched,
@@ -177,7 +177,7 @@ export const DocketSwitchReviewConfirm = ({
           onCancel={onCancel}
           onBack={onBack}
           onSubmit={onSubmit}
-          disabled={disabled}
+          loading={loading}
           submitText="Confirm docket switch"
         />
       </div>
@@ -192,7 +192,7 @@ DocketSwitchReviewConfirm.propTypes = {
   onBack: PropTypes.func,
   onCancel: PropTypes.func,
   onSubmit: PropTypes.func,
-  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
   originalReceiptDate: PropTypes.instanceOf(Date),
   docketSwitchReceiptDate: PropTypes.instanceOf(Date),
   issuesSwitched: PropTypes.arrayOf(
diff --git a/client/app/queue/docketSwitch/grant/DocketSwitchReviewConfirmContainer.jsx b/client/app/queue/docketSwitch/grant/DocketSwitchReviewConfirmContainer.jsx
index b88adf78f48..e425b8ed394 100644
--- a/client/app/queue/docketSwitch/grant/DocketSwitchReviewConfirmContainer.jsx
+++ b/client/app/queue/docketSwitch/grant/DocketSwitchReviewConfirmContainer.jsx
@@ -28,7 +28,7 @@ export const DocketSwitchReviewConfirmContainer = () => {
   const { appealId, taskId } = useParams();
   const { goBack, push } = useHistory();
   const dispatch = useDispatch();
-  const [disabled, setDisabled] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const appeal = useSelector((state) =>
     appealWithDetailSelector(state, { appealId })
@@ -85,7 +85,7 @@ export const DocketSwitchReviewConfirmContainer = () => {
     };
 
     try {
-      setDisabled(true);
+      setLoading(true);
       const resultAction = await dispatch(completeDocketSwitchGranted(docketSwitch));
       const { newAppealId } = unwrapResult(resultAction);
 
@@ -134,7 +134,7 @@ export const DocketSwitchReviewConfirmContainer = () => {
       onBack={goBack}
       onCancel={handleCancel}
       onSubmit={handleSubmit}
-      disabled={disabled}
+      loading={loading}
       originalReceiptDate={receiptDate}
       tasksAdded={tasksAdded}
       tasksKept={tasksSwitched}