feat: hidden when not ready

Author: zombieJ

examples/basic.tsx

@@ -32,7 +32,7 @@ function renderItem(item: ItemType) {
 }
 
 const Demo = () => {
-  const [data, setData] = React.useState(createData(5));
+  const [data, setData] = React.useState(createData(1));
 
   return (
     <div style={{ padding: 32 }}>

src/Item.tsx

@@ -47,7 +47,7 @@ export default function Item<ItemType>(props: ItemProps<ItemType>) {
   let itemNode = (
     <div
       className={classNames(prefixCls, className)}
-      style={{ opacity: display ? 1 : 0.2, order }}
+      style={{ opacity: display ? 1 : 0, order, pointerEvents: 'none' }}
     >
       {childNode}
     </div>

src/Overflow.tsx

@@ -88,7 +88,15 @@ function Overflow<ItemType = any>(
       const len = data.length;
 
       for (let i = 0; i < len; i += 1) {
-        const itemWidth = itemWidths.get(getKey(data[i], i)) || 0;
+        const itemWidth = itemWidths.get(getKey(data[i], i));
+
+        // Break since data not ready
+        if (itemWidth === undefined) {
+          setDisplayCount(i - 1);
+          break;
+        }
+
+        // Find best match
         totalWidth += itemWidth;
 
         if (totalWidth + overflowWidth > containerWidth) {