feat: [IOCOM-824,IOCOM-825] Loading and loaded message list adapted to the new DS

[Vangaorth]

Short description

This PR adds the message list loading and displaying, adapted to the new DS.

Empty list, Error handling, item selection, next page loading, refresh and so on will come later.

Inbox loading	Archive loading	Inbox loaded	Archive loaded

List of changes proposed in this pull request

• New MessageListItem and MessageListItemSkeleton components. These files and all the content inside the DS folder will later be moved into the design system library. They are temporarily here in order to ease the development process and changes that will come in later PRs. CustomPressableListItem will later be merged into PressableListItem. useListItemSpingAnimation is just an exported hook from the design system, used inside CustomPressableListItem, and will be later deleted.
• MessageList component have been enhanced in order to implement the FlatList displaying the message list
• New WrappedMessageListItem to encapsulate all the business and rendering logic for the MessageListItem
• New messageListForCategorySelector selector. Its output is used by the message FlatList and it is interpreted as follows:
  • undefined output means that messages are still loading
  • an empty list is used to trigger the Empy List Component in the Flat List (which will be implemented later). This component will handle both a "no messages" case and the "no messages because of an error" case.
  • a message list to display

When undefined is returned, MessageList provides a fixed list as an input to the FlatList. Such list is computed in order to have as much elements as the screen height allows, to fill the view. Its type is different from the standard message list so that the renderItem function can detect it and create MessageListItemSkeleton components instead of WrappedMessageListItem ones.

• WrappedMessageListItem uses a selector to get the service data which is used to compute the service's logo CDN urls. If service data is not available, a loadServiceDetails.request action is dispatch to load them. Since such request uses a takeEvery saga, we have to make sure not to dispatch multiple requests for the same service (since multiple messages may have the same service). This is done by checking if the service's pot is in its loading state inside the useEffect hook. This status is inside the redux state but we do not want a re-rendering to happen when the pot changes: that is why this latter data is retrieved using the store and not a selector.

How to test

Using the io-dev-api-server, make sure that both DS and new home are enabled in app. Get to the messages home and switch between tabs (in order to see the loading list with the dev server, you can set a delay function on the related router, something like 3500 milliseconds).

[pagopa-github-bot]

	Warnings
⚠️	Multiple stories with different types are associated with this Pull request. Only one tag will be added, following the order: feature > bug > chore

Affected stories

• 🌟 IOCOM-824: [App] Adattare schermata ricevuti (visualizzazione)
  subtask of
  • ⚡ IOCOM-810: Adottare il nuovo design system nella Home dei messaggi
• 🌟 IOCOM-825: [App] Adattare schermata archiviati (visualizzazione)
  subtask of
  • ⚡ IOCOM-810: Adottare il nuovo design system nella Home dei messaggi

Generated by 🚫 dangerJS against 78c1c2f

[codecov]

Codecov Report

Attention: Patch coverage is 81.08108% with 21 lines in your changes are missing coverage. Please review.

Project coverage is 49.88%. Comparing base (4f204b4) to head (78c1c2f).
Report is 116 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5784      +/-   ##
==========================================
+ Coverage   48.42%   49.88%   +1.45%     
==========================================
  Files        1488     1637     +149     
  Lines       31617    32570     +953     
  Branches     7669     7938     +269     
==========================================
+ Hits        15311    16246     +935     
- Misses      16238    16262      +24     
+ Partials       68       62       -6     

Files	Coverage Δ
...components/Home/DS/CustomPressableListItemBase.tsx	100.00% <100.00%> (ø)
...es/messages/components/Home/DS/MessageListItem.tsx	100.00% <100.00%> (ø)
ts/features/messages/components/Home/homeUtils.ts	100.00% <100.00%> (ø)
...s/features/messages/store/reducers/allPaginated.ts	89.25% <100.00%> (+7.43%)	⬆️
ts/features/messages/utils/index.ts	100.00% <100.00%> (ø)
ts/utils/pot.ts	100.00% <100.00%> (+25.00%)	⬆️
...ges/components/Home/DS/MessageListItemSkeleton.tsx	66.66% <66.66%> (ø)
...s/components/Home/DS/useListItemSpringAnimation.ts	88.88% <88.88%> (ø)
...essages/components/Home/WrappedMessageListItem.tsx	92.59% <92.59%> (ø)
.../features/messages/components/Home/MessageList.tsx	15.78% <15.78%> (ø)

... and 572 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5e8bfc1...78c1c2f. Read the comment docs.

[forrest57]

LGTM