buildo / react-placeholder

A React component to easily replicate your page with nice placeholders while the content is loading
MIT License
1.61k stars 97 forks source link

type CustomPlaceholderProps showLoadingAnimation is undefined instead of boolean #90

Closed joshuayoes closed 4 years ago

joshuayoes commented 4 years ago

Really like this library, but I found an incorrect type that is preventing me from using the showLoadingAnimation prop.

<ReactPlaceholder
   showLoadingAnimation
   ready={!isLoading}
   customPlaceholder={<RectShape className={style.skeleton} color="lightgray" />}
>
   <img src={src} alt={`Preview of ${name}`} />
</ReactPlaceholder>

With the following example, typescript throws the following error abot

Types of property 'showLoadingAnimation' are incompatible. Type 'true' is not assignable to type 'undefined'.ts(2322)

I was checking the typings file and noticed the showLoadingAnimation prop type on one of the main exported unions types is undefined.

declare type CustomPlaceholderProps = CommonProps & {
    /** pass any renderable content to be used as placeholder instead of the built-in ones */
    customPlaceholder?: React.ReactElement<{
        [k: string]: any;
    }> | null;
    type?: undefined;
    rows?: undefined;
    color?: undefined;
    showLoadingAnimation?: undefined;
};

I would expect this to be a boolean. The optional flag already defines that it can be undefined. When I edit it in node_modules, it behaves as expect on my machine and no longer throws the error.

Suggested fix:

declare type CustomPlaceholderProps = CommonProps & {
    [...]
    showLoadingAnimation?: boolean;
    [...]
};

I'll open a pull request from this, I'd really like to use this library for my project but a main feature that I like is the animation

joshuayoes commented 4 years ago

Can you republish this library with the updated type? I have the latest version but I'm still getting a type error

giogonzo commented 4 years ago

released as v4.0.3

giogonzo commented 4 years ago

thank you @joshuayoes and @BrianMitchL !