💡 Improve Metadata Validation Approach for Faster Content Loading

[bosko-m]

Area

Other

Is there new design needed?

Yes

What?

Adjust the metadata validation approach in the following sections:

• DRep Directory
• Live Governance Actions
• Governance Outcomes

Instead of validating each item before displaying content in the browser, items should be listed as quickly as possible, while validation occurs asynchronously in the background. Items still undergoing validation should display a clear visual indicator to signal their "in-progress" status.

Why?

• Significantly improves the initial load time, especially in production where the initial list query takes approximately 3 seconds.
• Ensures the majority of items are displayed promptly, enhancing user experience.
• Provides a clear visual cue to distinguish between validated and unvalidated items, maintaining transparency for users.

How?

• Modify the current logic to:
  • List all items immediately after the initial query completes.
  • Perform asynchronous metadata validation for each item in the background.
  • Introduce a visual indicator (e.g., spinner, icon, or label) to denote items still undergoing validation.
• Ensure the visual indicator is replaced with confirmation (e.g., checkmark) once validation is completed.
• Make sure that the current error handling is retained.

(Optional) User Story with acceptance criteria

• Items in the DRep Directory, Live Governance Actions, and Governance Outcomes are listed immediately upon the initial query completion.
• Metadata validation occurs asynchronously in the background.
• Items still undergoing validation display a clear visual indicator.
• Successfully validated items are marked accordingly (e.g., checkmark or status change).
• Items that fail validation display an appropriate error indicator or message.

[bosko-m]

@m-i-k-e This is something that should greatly improve user experience. Please take a look and provide some creative solution.
FYI @MSzalowski , once @m-i-k-e have a visual solution, but you can think of the approach already.
CC @Ryun1 @l-br1

[m-i-k-e]

@bosko-m this seems a lot of work to save three seconds.
I think that we should look at:

1. defining the problem,
2. creating user stories
3. Discuss alternatives before making the solution

This issue already contains a solution, but there may be other ways of looking at this.

[bosko-m]

@m-i-k-e Those 3 seconds means a lot when it comes to the user experience. If the goal is to have whole page loading under 2 seconds, 3 seconds is significant. You can look at the approach that was done by @profd2004 in the outcomes page. Something like that can be considered as a significant improvement.

[m-i-k-e]

@bosko-m I'm all for the page loading faster. What I probably didn't make clear was that I was concerned that users will still be waiting the same amount of time, just incrementally getting things popping up on their screen. I guess that this is actually much better, so let's do it.

[bosko-m]

React skeleton from material design should be used.
https://mui.com/material-ui/react-skeleton/
Ready for development @MSzalowski