Create Activity Section with Populated, Loading, and Empty States

[ajsarkar28]

Overview This ticket covers the creation of the home screen's activity section with the populated, loading, and empty states. The error and edgecases are covered in this ticket.

For all visual elements in this ticket, reflect the designs in this Figma file

Header

• A header that says Activity, using the designs in , is implemented. Home screen buttons only appear after this header

Populated

• If a feature module has data returned from the backend, then it is displayed on the home screen

Loading

• While the backend is returning feature module data, display the loading UI
• Once the backend has returned data for any feature module, do not display the loading UI

Empty State

• If no data has been returned from the backend for any feature module, then display the empty state UI

Accessibility & Content

• All accessibility guidelines in previously linked Figma file have been followed
• All content is linked in this Mural

[TKDickson]

Test case link in TestRail

[theodur]

@TKDickson Heads up, I had to make minor changes to the loading component on the View message screen. I confirmed there are no breaking changes to that screen, but wanted to let you know just in case. Here's more context if you're curious:

Originally, there was an inlineSpinner prop that was added to the LoadingComponent, and basically all it did was remove the contents of the LoadingComponent out of the VAScrollView that wraps around it. This was needed so that the background color of the loading component matched the background of the View message screen (since it uses a different background color than other screens in the app). Here's a video of what the prop was doing.

I wanted to use the inlineSpinner prop to render the spinner next to the text (like how we need it for the activity section), so I updated up the LoadingComponent to accept a new prop scrollViewStyle that allows for modifying the style of the VAScrollView. This way, instead of conditionally removing the loading component content out of the scroll view just to match the background color of the screen, we can manually pass the background color to the loading component

[TKDickson]

• The icon in this section (whether it's loading, success or error) is meant to be read as a unit with the related text. (This wasn't specified in the Figma before, but is now after talking with UX). So should be, for example:

  Activity heading
  /
  Success icon, There's no activity to show

• The loading indicator isn't currently read as 'loading' but should be according to the Figma annotation (which I realize may involve changing ALL loading indicators in the whole app, so if that's the deal let's chat about it with the team first)
• We're (over-showing? mistakenly showing?) a Cerner-specific message when a patient has no activity buttons. See the Mural, column 2B for what should happen when the veteran has nothing in teh Activity section (vs what we're currently showing, which is a mix of 2B and 5A/B). I'm using +226 who is not a Cerner patient/has no Oracle Health sites.

[TKDickson]

Ah, shoot. We broke messaging details by messing with the spinner.

Here's the behavior loading a message with attachment(s) from a thread in message details, in develop. Here's the behavior in this branch (note the change in location after load, plus the message you're trying to open is still collapsed when you get back down to it and you have to open it again)

+226 has messages with threads/attachments (the first one in the inbox list should work for you) to check this out.

[theodur]

Nice finds @TKDickson! Just fixed all of these, should be good to test again

[TKDickson]

@theodur sending back your way for a couple things

Message details loading behavior (spinner & the rest), as well as reading [icon + text] for both loading and empty states, are now both fixed.

• Still showing the extra Cerner message on empty state (screenshot, circled in purple)
• The empty state is now reading out an extra "right brace" along with the intended text, which I think you can mostly see in the caption on the second screenshot.

[dumathane]

fixed! Back to you @TKDickson

[TKDickson]

Confirmed fixes, ready for VQA.

[TKDickson]

belated test run link

[theodur]

I updated the margins for the alert statuses as discussed in Slack (thread). Went ahead and updated the margins for the About you section's alert statuses too, since those also had the 10 px margins. Here's what it looks like for reference:

  

[wavelaurenrussell]

Thank you. Reviewed the changes – looks good!

[TKDickson]

merged to xl and closing