jaredLunde/masonic

Sometimes the blank page when loading data for the first time

BoyStarIT opened this issue · 3 comments

Sometimes the blank page when loading data for the first time

Screenshots

  • This my config
    image
  • This list show
    image

I don't know why, please help me~!
Thanks bro

I have same problem. It is empty until first scroll

It is caused by cache of usePositioner.
I fixed it with

  const nextIdRef = useRef(0);
  const currentKeys = useMemo(() => {
    return items
      .map(uniqueKey)
      .join(',');
  }, [items, uniqueKey]);

  const previousItems = usePrevious(items);
  const previousKeys = usePrevious(currentKeys);

  useMemo(() => {
    if (!previousItems) {
      return;
    }

    if (!previousItems.length && !items.length) {
      return;
    }

    if (previousKeys && currentKeys && currentKeys.startsWith(previousKeys)) {
      return;
    }

    nextIdRef.current += 1;
  }, [currentKeys, previousKeys, items, previousItems]);

  const positioner = usePositioner({
     ...
  }, [nextIdRef.current]);

uniquekey is function which returns unique id of the item (string)

I tried checking many times and didn't see that error anymore
Thanks a ton bro