Skip to content
Advertisement

How to implement MUI skeleton on API response data?

I am using material-ui skeleton (Shimmer effect) on data which is coming from API.

{
accountData.usersAccountData.map((userData, index) => (
// ...UI code
)
)
}

Output is given below :
output
As you can see, I received 3 objects from API. So accountData.usersAccountData.map will run 3 times.
My question is, How can I implement mui skeleton while API is under process ?
How can show shimmer effect while API is under process ?

NOTE :
I have tried <Skeleton ...otherParams /> inside accountData.usersAccountData.map but this didn’t work because accountData.usersAccountData length is zero while API is under process.

Advertisement

Answer

So you need to implement isAPILoading for skeleton before your main UI render like this

if (isAPILoading) {
  return <Skeleton ...otherParams />;
}

return (
   {
     accountData.usersAccountData.map((userData, index) => (
    // ...UI code
    )
   )
  }
    )

but you need to also check for whether your response is success or fail if success you can show your UI else you can show error for the same.

Advertisement