How can a standard skeleton loading context be created?

Question

everyone.

I have been researching various posts and websites in search of an answer, but all I came across was "skeleton CSS and style." My specific question is how we should structure the foundation of a skeleton template.

In my opinion, the process should be as follows:

1. We create our skeleton template, similar to the one found at link

2. We determine the total count of our cartItems.

3. Before fetching data from the database, we generate skeleton templates based on the total count of records.

4. Once the data is loaded, for example through AJAX, we hide all of the skeleton templates and display the newly fetched data.

However, I have some concerns regarding step number 3. Is this the only approach? Is it considered a professional way of handling this?

Thank you for your attention. I look forward to receiving your insights.

Best;