Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

merged 2 commits into from Aug 13, 2021


Copy link

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):


馃摑 Additional Information

Test was added. Was failing before my fix.

Copy link

changeset-bot bot commented Jul 23, 2021

馃 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

Copy link

vercel bot commented Jul 23, 2021

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:
鉁 Preview:

Copy link
Contributor Author

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

Copy link
Contributor Author

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@*"

Copy link

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

@segunadebayo segunadebayo merged commit be28abf into chakra-ui:main Aug 13, 2021
@github-actions github-actions bot mentioned this pull request Aug 13, 2021
@codetheweb codetheweb deleted the fix/skeleton-flash branch August 13, 2021 16:56
This was referenced Aug 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

Skeleton animating unnecessarily
2 participants