skeleton when loading list

[arb195]

Hi 👋🏻
I want make a skeleton when list item loading

[oleggrishechkin]

I'm not sure if this issue is related to this library. Do you have some problems with skeleton/unexpected behaviour?

[arb195]

I want when scrolling body and loading new items to show a skeleton until loaded my new data

[oleggrishechkin]

I don't understand what problem is.

Possible workaround is just add "loading" items to your loaded items and render it like this -

const items = useMemo(
    () => loadingItemsCount
        ? data.concat(generateEmptyItems(loadingItemsCount))
        : data,
    [data, loadingItemsCount]
);

return (
    <ViewportList items={items}>
        {(item) => item.isEmpty ? <Skeleton key={item.id} /> : <Item key={item.id} data={item} />}
    </VIewportList>
);

[arb195]

Thank you very much for your guidance

[sinaprgm1376]

i need this feature too.
but don't know how its work.
What does generateEmptyItems do?
What items does loadingItemsCount include?

I suggest adding this as a feature to the package😍

[oleggrishechkin]

This is unrelated to react-viewport-list. This library is just for virtualizing.

You can create infinite scroll/loaders/skeletons by yourself.

One of the possible workarounds is render fake items as I described above.

generateEmptyItems is something like this

const generateEmptyItems = (count) =>
    new Array(count).fill(null).map(() => ({ id: uuid(), isEmpty: true }));

loadingItemsCount - a count of skeletons. It can be a count from your paginated fetch response

[oleggrishechkin]

Maybe will be better to support itemsCount prop too instead of only items prop to not generate fake items manually

Can it help you?

[oleggrishechkin]

Maybe will be better to support itemsCount prop too instead of only items prop to not generate fake items manually

Can it help you?

Guys what do you think? @sinaprgm1376 @arb195

[arb195]

I don't understand your point

[oleggrishechkin]

So, I don't understand what you want

Do you want to a guide "how deal with loading and skeletons" or something API improvement?