[all components]: Review component behaviour when loading data asynchronously
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary
There have been issues with our components when loading data in asynchronously. For example, some components are initially set with an empty array. Once data is loaded in, there are instances where the component generates errors, data is not updated on the component or functionality stops working.
## 💬 Description
This ticket is to review all the components which deal with data being added asynchronously like checkboxes and radio buttons (https://github.com/mi6/ic-ui-kit/issues/1749). A good test is to initially set the component with empty options and then populating using setTimeout.
## 💰 Use value
Most data is sideloaded so this will cover the general approach to using a backend and API to retrieve data for the UI components.
## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
*Given a developer side loading data*
*When data is initially empty and then populated*
*Then the component should work as expected without any console errors or issues with functionality*
## ✏ Designs
N/A
## 🧾 Guidance
N/A
## Additional info
An example of this error is demonstrated in this ticket: https://github.com/mi6/ic-ui-kit/issues/1749
Contributor guide
Research direction
Start by reading issue #1749 and reproducing its asynchronous-loading example with empty options followed by setTimeout population. Review the affected components and check for console errors, missing updates, or broken functionality. Done means the relevant components continue working when data is initially empty and later populated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100