Undefined Props in <Skeleton> Overriding <SkeletonTheme>

[Sean Moran]

Describe the bug
When I pass undefined in the props to <Skeleton>, this overrides the context values passed via the <SkeletonTheme> props. This makes it hard to explicitly accept props in a wrapper component. For example, I can do:

function SkeletonWrapperPassthrough({ ...props }) {
  return <Skeleton {...props} />;
}

but I can't do (imagine I typed out all 16 props):

function SkeletonWrapperExplicit({ baseColor, highlightColor, ...rest }) {
    return <Skeleton baseColor={baseColor} highlightColor={highlightColor} {...rest} />;
}

To Reproduce
<SkeletonWrapperExplicit> is from above. Like above, imagine I typed out all 9 props:

function SkeletonThemeExample({ baseColor, highlightColor, ...rest }) {
    return <SkeletonTheme baseColor={baseColor} highlightColor={highlightColor} {...rest}>
        <Skeleton />;
    </SkeletonTheme>;
}

<SkeletonThemeExample baseColor='red' highlightColor='green' />

Actual Behavior
I should see a Christmas-themed loading bar, with red as the base color & green as the animation color.

Expected Behavior
I see the generic gray-ish loading bar with a lighter animation color.

Versions

• react-loading-skeleton version: 3.0.1
• Browser version: Google Chrome 96.0.4664.110

Additional context
Add any other context about the problem here.

[Sam Magura]

Hello, thank you for the report. I created a CodeSandbox of the issue here: https://codesandbox.io/s/react-loading-skeleton-128-zd4sm?file=/src/App.tsx

I believe passing an explicit undefined to the skeleton, like <Skeleton highlightColor={undefined} /> should behave the exact same as not passing the prop at all like <Skeleton />. My only concern is that it could be argued that this is a breaking change. That said, I would like to release this as a patch release (3.0.2).

I should be able to fix this tomorrow.

[Sean Moran]

You're very welcome, just doing my part in making a great component even better!