fix(skeleton): don't animate when skeleton was previously loaded

[codetheweb]

Closes #4394.

📝 Description

#2775 fixed one bug but introduced another.

⛳️ Current behavior (updates)

If a component has a child Skeleton that's loaded (<Skeleton isLoaded/>) and the parent component re-renders, the Skeleton would animate because it was no longer the first render.

🚀 New behavior

It now needs to meet a stronger condition to animate when loaded. If isLoaded=true and it's the first render or the skeleton was already loaded in the previous render, no animation will happen.

💣 Is this a breaking change (Yes/No):

No.

📝 Additional Information

Test was added. Was failing before my fix.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9cdbf41

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@chakra-ui/skeleton	Patch
@chakra-ui/react	Patch
@chakra-ui/test-utils	Patch
@chakra-ui/props-docs	Patch
@chakra-ui/docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui/5UNNTNiR5DbJpwAFiPpPgmgaezwY
✅ Preview: https://chakra-ui-git-fork-codetheweb-fix-skeleton-flash-chakra-ui.vercel.app

[codetheweb]

Anything I need to do on my side to move this forward? Would be nice to get this patch in since I'm deploying an application soon that makes heavy use of Skeletons. :)

[codetheweb]

For anyone else who needs this fix ASAP:

I published this branch as @codetheweb/chakra-ui-skeleton-patch. You can use it by modifying your package.json:

{
  ...
  "resolutions": {
    "@chakra-ui/skeleton": "npm:@codetheweb/chakra-ui-skeleton-patch@*"
  }
  ...
}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9cdbf41:

Sandbox	Source
create-react-app-ts	Configuration
heuristic-tu-3zsyc	Issue #4394