@react-fabric/data 1.0.0-beta.58 → 1.0.0-beta.59

package/dist/cjs/virtual/Gallery.js

@@ -87,13 +87,13 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     estimateSize: function estimateSize() {
       return height;
     },
-    overscan: 2
+    overscan: 0
   });
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = react.useRef(0);
   react.useEffect(function () {
-    var _virtualItems$2$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$2$index = (_virtualItems$ = virtualItems[2]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$2$index !== void 0 ? _virtualItems$2$index : 0;
+    var _virtualItems$0$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$0$index = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$0$index !== void 0 ? _virtualItems$0$index : 0;
     if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = react.useCallback(function () {
@@ -144,13 +144,17 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
       };
     }
   }, [onLoadMore, virtualItems]);
+  var isRenderedRef = react.useRef(false);
   react.useLayoutEffect(function () {
-    setTimeout(function () {
-      initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
-        align: "start"
-      });
-    }, 100);
-  }, [columnCount]);
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
+      initialScroll && setTimeout(function () {
+        virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
+          align: "start"
+        });
+      }, 200);
+    }
+  }, [columnCount, initialScroll, itemList]);
   react.useImperativeHandle(galleryRef, function () {
     return {
       scrollToItem: function scrollToItem(index) {
@@ -204,10 +208,17 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
               "data-index": index,
               ref: virtualizer.measureElement,
               children: columnMap.map(function (col) {
+                var _itemList;
                 return /*#__PURE__*/jsxRuntime.jsx("div", {
                   "data-index": index * columnCount + col,
                   className: classNames("grid rounded-capped"),
-                  children: itemList[index * columnCount + col] && children(itemList[index * columnCount + col])
+                  style: {
+                    minWidth: width,
+                    minHeight: height
+                  },
+                  children: (_itemList = itemList[index * columnCount + col]) !== null && _itemList !== void 0 && _itemList.item ? children(itemList[index * columnCount + col]) : /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {
+                    className: "p-2"
+                  })
                 }, "".concat(key, ":").concat(col));
               })
             }, key);

package/dist/cjs/virtual/List.js

@@ -56,7 +56,7 @@ var _VirtualList = function _VirtualList(_ref) {
   var scrollerRef = react.useRef(null);
   var virtualizer = reactVirtual.useVirtualizer({
     count: count,
-    overscan: 2,
+    overscan: 0,
     horizontal: orientation === "horizontal",
     getScrollElement: function getScrollElement() {
       return scrollerRef.current;
@@ -68,8 +68,8 @@ var _VirtualList = function _VirtualList(_ref) {
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = react.useRef(0);
   react.useEffect(function () {
-    var _virtualItems$2$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$2$index = (_virtualItems$ = virtualItems[2]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$2$index !== void 0 ? _virtualItems$2$index : 0;
+    var _virtualItems$0$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$0$index = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$0$index !== void 0 ? _virtualItems$0$index : 0;
     if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = react.useCallback(function () {
@@ -131,13 +131,17 @@ var _VirtualList = function _VirtualList(_ref) {
       };
     }
   }, [onLoadMore, virtualItems]);
+  var isRenderedRef = react.useRef(false);
   react.useLayoutEffect(function () {
-    setTimeout(function () {
-      initialScroll && virtualizer.scrollToIndex(initialScroll, {
-        align: "start"
-      });
-    }, 100);
-  }, []);
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
+      initialScroll && setTimeout(function () {
+        virtualizer.scrollToIndex(Math.floor(initialScroll), {
+          align: "start"
+        });
+      }, 200);
+    }
+  }, [itemList, initialScroll]);
   react.useImperativeHandle(listRef, function () {
     return {
       scrollToItem: function scrollToItem(index) {
@@ -189,13 +193,20 @@ var _VirtualList = function _VirtualList(_ref) {
               display: "inline-block"
             }
           }), virtualItems.map(function (_ref3) {
+            var _itemList$index;
             var key = _ref3.key,
               index = _ref3.index;
             return /*#__PURE__*/jsxRuntime.jsx("div", {
               "data-index": index,
               ref: virtualizer.measureElement,
               className: classNames("rounded-capped", orientation === "horizontal" ? "inline-grid" : "grid"),
-              children: children(itemList[index])
+              style: {
+                minWidth: width,
+                minHeight: height
+              },
+              children: (_itemList$index = itemList[index]) !== null && _itemList$index !== void 0 && _itemList$index.item ? children(itemList[index]) : /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {
+                className: "p-2"
+              })
             }, key);
           })]
         }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/esm/virtual/Gallery.js

@@ -87,13 +87,13 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     estimateSize: function estimateSize() {
       return height;
     },
-    overscan: 2
+    overscan: 0
   });
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = useRef(0);
   useEffect(function () {
-    var _virtualItems$2$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$2$index = (_virtualItems$ = virtualItems[2]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$2$index !== void 0 ? _virtualItems$2$index : 0;
+    var _virtualItems$0$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$0$index = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$0$index !== void 0 ? _virtualItems$0$index : 0;
     if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = useCallback(function () {
@@ -144,13 +144,17 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
       };
     }
   }, [onLoadMore, virtualItems]);
+  var isRenderedRef = useRef(false);
   useLayoutEffect(function () {
-    setTimeout(function () {
-      initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
-        align: "start"
-      });
-    }, 100);
-  }, [columnCount]);
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
+      initialScroll && setTimeout(function () {
+        virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
+          align: "start"
+        });
+      }, 200);
+    }
+  }, [columnCount, initialScroll, itemList]);
   useImperativeHandle(galleryRef, function () {
     return {
       scrollToItem: function scrollToItem(index) {
@@ -204,10 +208,17 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
               "data-index": index,
               ref: virtualizer.measureElement,
               children: columnMap.map(function (col) {
+                var _itemList;
                 return /*#__PURE__*/jsx("div", {
                   "data-index": index * columnCount + col,
                   className: classNames("grid rounded-capped"),
-                  children: itemList[index * columnCount + col] && children(itemList[index * columnCount + col])
+                  style: {
+                    minWidth: width,
+                    minHeight: height
+                  },
+                  children: (_itemList = itemList[index * columnCount + col]) !== null && _itemList !== void 0 && _itemList.item ? children(itemList[index * columnCount + col]) : /*#__PURE__*/jsx(Skeleton, {
+                    className: "p-2"
+                  })
                 }, "".concat(key, ":").concat(col));
               })
             }, key);

package/dist/esm/virtual/List.js

@@ -56,7 +56,7 @@ var _VirtualList = function _VirtualList(_ref) {
   var scrollerRef = useRef(null);
   var virtualizer = useVirtualizer({
     count: count,
-    overscan: 2,
+    overscan: 0,
     horizontal: orientation === "horizontal",
     getScrollElement: function getScrollElement() {
       return scrollerRef.current;
@@ -68,8 +68,8 @@ var _VirtualList = function _VirtualList(_ref) {
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = useRef(0);
   useEffect(function () {
-    var _virtualItems$2$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$2$index = (_virtualItems$ = virtualItems[2]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$2$index !== void 0 ? _virtualItems$2$index : 0;
+    var _virtualItems$0$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$0$index = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$0$index !== void 0 ? _virtualItems$0$index : 0;
     if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = useCallback(function () {
@@ -131,13 +131,17 @@ var _VirtualList = function _VirtualList(_ref) {
       };
     }
   }, [onLoadMore, virtualItems]);
+  var isRenderedRef = useRef(false);
   useLayoutEffect(function () {
-    setTimeout(function () {
-      initialScroll && virtualizer.scrollToIndex(initialScroll, {
-        align: "start"
-      });
-    }, 100);
-  }, []);
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
+      initialScroll && setTimeout(function () {
+        virtualizer.scrollToIndex(Math.floor(initialScroll), {
+          align: "start"
+        });
+      }, 200);
+    }
+  }, [itemList, initialScroll]);
   useImperativeHandle(listRef, function () {
     return {
       scrollToItem: function scrollToItem(index) {
@@ -189,13 +193,20 @@ var _VirtualList = function _VirtualList(_ref) {
               display: "inline-block"
             }
           }), virtualItems.map(function (_ref3) {
+            var _itemList$index;
             var key = _ref3.key,
               index = _ref3.index;
             return /*#__PURE__*/jsx("div", {
               "data-index": index,
               ref: virtualizer.measureElement,
               className: classNames("rounded-capped", orientation === "horizontal" ? "inline-grid" : "grid"),
-              children: children(itemList[index])
+              style: {
+                minWidth: width,
+                minHeight: height
+              },
+              children: (_itemList$index = itemList[index]) !== null && _itemList$index !== void 0 && _itemList$index.item ? children(itemList[index]) : /*#__PURE__*/jsx(Skeleton, {
+                className: "p-2"
+              })
             }, key);
           })]
         }), loading && /*#__PURE__*/jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.58",
+  "version": "1.0.0-beta.59",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.58",
-    "@react-fabric/date": "^1.0.0-beta.58",
-    "@react-fabric/form": "^1.0.0-beta.58",
-    "@react-fabric/utilities": "^1.0.0-beta.58",
+    "@react-fabric/core": "^1.0.0-beta.59",
+    "@react-fabric/date": "^1.0.0-beta.59",
+    "@react-fabric/form": "^1.0.0-beta.59",
+    "@react-fabric/utilities": "^1.0.0-beta.59",
     "@tanstack/react-virtual": "~3.13.12",
     "classnames": "~2.5.1",
     "color": "~5.0.2",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "7e66f8c498e37a40e410ecafff2ea6b31505dc1a"
+  "gitHead": "74efd06c9c5ac629b6ef5cdc6d53ecb1c356f2eb"
 }

package/src/virtual/Gallery.tsx

@@ -182,14 +182,14 @@ const _VirtualGallery = <T extends AnyObject>({
     count: Math.ceil(count / columnCount),
     getScrollElement: () => scrollerRef.current,
     estimateSize: () => height,
-    overscan: 2,
+    overscan: 0,
   });
 
   const virtualItems = virtualizer.getVirtualItems();
 
   const currentIndex = useRef(0);
   useEffect(() => {
-    currentIndex.current = virtualItems[2]?.index ?? 0;
+    currentIndex.current = virtualItems[0]?.index ?? 0;
     if (
       scrollerRef.current &&
       virtualItems[0] &&
@@ -246,14 +246,18 @@ const _VirtualGallery = <T extends AnyObject>({
     }
   }, [onLoadMore, virtualItems]);
 
+  const isRenderedRef = useRef(false);
   useLayoutEffect(() => {
-    setTimeout(() => {
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
       initialScroll &&
-        virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
-          align: "start",
-        });
-    }, 100);
-  }, [columnCount]);
+        setTimeout(() => {
+          virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
+            align: "start",
+          });
+        }, 200);
+    }
+  }, [columnCount, initialScroll, itemList]);
 
   useImperativeHandle(
     galleryRef,
@@ -328,11 +332,16 @@ const _VirtualGallery = <T extends AnyObject>({
                     key={`${key}:${col}`}
                     data-index={index * columnCount + col}
                     className={classNames("grid rounded-capped")}
+                    style={{
+                      minWidth: width,
+                      minHeight: height,
+                    }}
                   >
-                    {itemList[index * columnCount + col] &&
-                      children(
-                        itemList[index * columnCount + col] as AnyObject,
-                      )}
+                    {itemList[index * columnCount + col]?.item ? (
+                      children(itemList[index * columnCount + col] as AnyObject)
+                    ) : (
+                      <Skeleton className="p-2" />
+                    )}
                   </div>
                 ))}
               </div>

package/src/virtual/List.tsx

@@ -133,7 +133,7 @@ const _VirtualList = <T extends AnyObject>({
   const extraSize = useMemo(() => (onLoadMore ? 8 : 0), [onLoadMore]);
   const itemList: Array<{
     index: number;
-    data: T;
+    item: T;
     isLast: boolean;
     isSticky: boolean;
   }> = createItemList(
@@ -149,7 +149,7 @@ const _VirtualList = <T extends AnyObject>({
   const scrollerRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({
     count,
-    overscan: 2,
+    overscan: 0,
     horizontal: orientation === "horizontal",
     getScrollElement: () => scrollerRef.current,
     estimateSize: () => (orientation === "horizontal" ? width : height),
@@ -159,7 +159,7 @@ const _VirtualList = <T extends AnyObject>({
 
   const currentIndex = useRef(0);
   useEffect(() => {
-    currentIndex.current = virtualItems[2]?.index ?? 0;
+    currentIndex.current = virtualItems[0]?.index ?? 0;
     if (
       scrollerRef.current &&
       virtualItems[0] &&
@@ -225,12 +225,18 @@ const _VirtualList = <T extends AnyObject>({
     }
   }, [onLoadMore, virtualItems]);
 
+  const isRenderedRef = useRef(false);
   useLayoutEffect(() => {
-    setTimeout(() => {
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
       initialScroll &&
-        virtualizer.scrollToIndex(initialScroll, { align: "start" });
-    }, 100);
-  }, []);
+        setTimeout(() => {
+          virtualizer.scrollToIndex(Math.floor(initialScroll), {
+            align: "start",
+          });
+        }, 200);
+    }
+  }, [itemList, initialScroll]);
 
   useImperativeHandle(
     listRef,
@@ -311,8 +317,16 @@ const _VirtualList = <T extends AnyObject>({
                   "rounded-capped",
                   orientation === "horizontal" ? "inline-grid" : "grid",
                 )}
+                style={{
+                  minWidth: width,
+                  minHeight: height,
+                }}
               >
-                {children(itemList[index] as AnyObject)}
+                {itemList[index]?.item ? (
+                  children(itemList[index] as AnyObject)
+                ) : (
+                  <Skeleton className="p-2" />
+                )}
               </div>
             ))}
           </div>