title: How to show multiple loading Skeleton screen on looping array in react using material ui Skeleton component?
body: <p>I'm dealing with the react project that fetches data through API endpoint. I'm using material-UI for UI components. I want to implement the Skeleton component from material-ui to show loading when waiting for the data to be fetched from the backend.</p>
  <p>The problem is, I can show the skeleton when data is being fetched, but I want to show the skeleton component to be displayed for all the items in the array that are being looped through.</p>
  <p>Here what is worked on</p>
  <p><a href="https://i.stack.imgur.com/pL1Nu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pL1Nu.png" alt="enter image description here" /></a></p>
  <p>here what i want..</p>
  <p><a href="https://i.stack.imgur.com/m8nLW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m8nLW.png" alt="enter image description here" /></a></p>
  <p>IF the api's returning the response with an array of consisting six objects, i want to show skeleton loading component to show six times on the screen.</p>
  <p>How can I do that.</p>