| ID | Color | Stock |
|---|---|---|
When we are working with lists which can be reasonably expected to have a known number of items when the application starts (20), we can pre-render the list items (table rows in this case) and hide them. The rendering logic would populate and unhide the pre-rendered items.
If later we need to add additional list items, we can clone the existing ones to create new ones.
The unpopulated elements are marked as hidden, and are therefore hidden from screen readers and
similar assistive technology. We also use them as skeleton screen to prevent the content from jumping around
the page after the data loads. These elements are only semantically hidden, but visible otherwise.