Int b 22701 ppm document loading mask service member

[msaki-caci]

B-22701

Summary

Currently, when a user is reviewing a PPM with a packed download available (AOA and Payment Packet), the user clicks on the packet, and even though the download  process is occurring in the background, the link remains clickable. 

This story will make it so if you select the AOA or Payment Packet links as a service member, you will be presented with a loading mask to cover up the screen while the PDF is downloading. I did make a small change to the default message for the loadspinner component that @danieljordan-caci made so any message that is displayed will have an ellipsis. I also added some new tests to check that the masking appears and goes away as it should.

Verification Steps for the Author

These are to be checked by the author.

• Tested in the Experimental environment (for changes to containers, app startup, or connection to data stores)
• Have the Agility acceptance criteria been met for this change?

Verification Steps for Reviewers

These are to be checked by a reviewer.

• Has the branch been pulled in and checked out?
• Have the BL acceptance criteria been met for this change?
• Was the CircleCI build successful?
• Has the code been reviewed from a standards and best practices point of view?

Setup to Run the Code

• Instructions for starting storybook
• Instructions for starting the MilMove application
• Instructions for running tests

How to test

1. Create a PPM Shipment as a service member.
2. Fill out all the necessary fields but make sure to select the AOA payment advance option.
3. Approve the shipment as an SC.
4. Finish the closeout documentation as a service member.
5. Approve all the requests as an SC.
6. Go back to view your move as a service member and attempt to select the Download AOA Paperwork (PDF) or the Download Payment Packet button.
7. Verify that the load mask appears with the spinner and the customized message.
   a. AOA will be "Downloading AOA Paperwork (PDF)..."
   b. Download Payment Packet will be "Downloading Payment Packet (PDF)..."

Frontend

• There are no aXe warnings for UI.
• This works in Supported Browsers and their phone views (Chrome, Firefox, Edge).
• There are no new console errors in the browser devtools.
• There are no new console errors in the test output.
• If this PR adds a new component to Storybook, it ensures the component is fully responsive, OR if it is intentionally not, a wrapping div using the officeApp class or custom min-width styling is used to hide any states the would not be visible to the user.
• This change meets the standards for Section 508 compliance.

Backend

• Code follows the guidelines for Logging.
• The requirements listed in Querying the Database Safely have been satisfied.

Database

Any new migrations/schema changes:

• Follows our guidelines for Zero-Downtime Deploys.
• Have been communicated to #g-database.
• Secure migrations have been tested following the instructions in our docs.

Screenshots

Screen.Recording.2025-03-04.at.4.37.44.PM.mov

[danieljordan-caci]

There's a much easier and concise way to show this overlay. Check out where I do it in EditOrdersForm or wherever.

Import the redux action:

import { setShowLoadingSpinner as setShowLoadingSpinnerAction } from 'store/general/actions';

You'll see the mapDispatchToProps at the bottom with this:

setShowLoadingSpinner: setShowLoadingSpinnerAction

Then you add that action into your component via the props, so in this case:

const MoveHome = ({ serviceMemberMoves, isProfileComplete, serviceMember, signedCertification, updateAllMoves, setShowLoadingSpinner }) => {

Then all you need to do is handle displaying/hiding the spinner around the function you're calling:

onStart={() => setShowLoadingSpinner(true, `Downloading AOA Paperwork (PDF)`);

And then in your onSuccess and onFailure functions, just make sure you're turning it back off:

setShowLoadingSpinner(false, null);

This way you don't need the useEffect or useState here