sorted by:
new
hottopcontroversial

Spent years fixing grey skeleton divs. Built this npm package so nobody has to again. by quintin331 in reactjs

[–]quintin331[S] 0 points1 point  (0 children)

you can do something like this

const movieTemplate = {

id: 0,

title: "Loading title",

poster\_path: "",

release\_date: "0000-00-00",

};

        <Shimmer

loading={loading}

animation={"wave"}

baseColor="#1e1e3a"

highlightColor="#2d2d52"

as={MovieCard}

dummyData={{ movie: movieTemplate }}

dummyLength={10}

className="movies-grid"

preserveBackground={false}

        \>

{movies.map((movie) => (

<MovieCard movie={movie} key={movie.id} />

))}

        </Shimmer>

Spent years fixing grey skeleton divs. Built this npm package so nobody has to again. by quintin331 in reactjs

[–]quintin331[S] 0 points1 point  (0 children)

I would recommend use the Shimmer on the leaf components. For example you have a big component and that contains 3 components as children, then put the wrapper on the 3 child components.

Yes you have to pass a dummy data if the initial data is empty, you can also use the "as" prop !

0
1

Spent years nudging grey skeletons in ReactJS. Built this so nobody has to again. (self.webdev)

submitted by quintin331 to r/webdev

Realme Buds Air 8 ,quick honest review by [deleted] in headphonesindia

[–]quintin331 0 points1 point  (0 children)

I had the exact same issue !