0
210
ViewsHow 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 :
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.
1 answers
Answer question0
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.