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.
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.