CODEWITHSUNDEEP
javascriptreactjsmaterial-uishimmer
Abhishek kamal
Abhishek kamal

Reputation: 482

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.

Upvotes: 1

Views: 1194

Answers (1)

krishn kumar modanval
krishn kumar modanval

Reputation: 612

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.

Upvotes: 1

Related Questions