Update Virtualizer to support placeholder rendering

src/react/VList.tsx

@@ -29,6 +29,7 @@ export interface VListProps
       | "onScroll"
       | "onScrollEnd"
       | "keepMounted"
+      | "renderPlaceholders"
     >,
     ViewportComponentAttributes {
   /**
@@ -57,6 +58,7 @@ export const VList = forwardRef<VListHandle, VListProps>(
       onScroll,
       onScrollEnd,
       style,
+      renderPlaceholders,
       ...attrs
     },
     ref
@@ -79,6 +81,7 @@ export const VList = forwardRef<VListHandle, VListProps>(
         item={item}
         onScroll={onScroll}
         onScrollEnd={onScrollEnd}
+        renderPlaceholders={renderPlaceholders}
       >
         {children}
       </Virtualizer>

src/react/Virtualizer.tsx

@@ -96,8 +96,9 @@ export interface VirtualizerProps {
    * Elements rendered by this component.
    *
    * You can also pass a function and set {@link VirtualizerProps.count} to create elements lazily.
+   * Placeholder will be true for out of view elements when renderPlaceholders is turned on, otherwise placeholder is always false.
    */
-  children: ReactNode | ((index: number) => ReactElement);
+  children: ReactNode | ((index: number, placeholder: boolean) => ReactElement);
   /**
    * If you set a function to {@link VirtualizerProps.children}, you have to set total number of items to this prop.
    */
@@ -114,6 +115,10 @@ export interface VirtualizerProps {
    * - If set, you can opt out estimation and use the value as initial item size.
    */
   itemSize?: number;
+  /**
+   * Render placeholders, allows for a placeholder element to be rendered instead of nothing when out of view
+   */
+  renderPlaceholders?: boolean;
   /**
    * While true is set, scroll position will be maintained from the end not usual start when items are added to/removed from start. It's recommended to set false if you add to/remove from mid/end of the list because it can cause unexpected behavior. This prop is useful for reverse infinite scrolling.
    */
@@ -183,6 +188,7 @@ export const Virtualizer = forwardRef<VirtualizerHandle, VirtualizerProps>(
       ssrCount,
       as: Element = "div",
       item: ItemElement = "div",
+      renderPlaceholders = false,
       scrollRef,
       onScroll: onScrollProp,
       onScrollEnd: onScrollEndProp,
@@ -238,8 +244,8 @@ export const Virtualizer = forwardRef<VirtualizerHandle, VirtualizerProps>(
 
     const items: ReactElement[] = [];
 
-    const getListItem = (index: number) => {
-      const e = getElement(index);
+    const getListItem = (index: number, placeholder = false) => {
+      const e = getElement(index, placeholder);
 
       return (
         <ListItem
@@ -327,24 +333,25 @@ export const Virtualizer = forwardRef<VirtualizerHandle, VirtualizerProps>(
       };
     }, []);
 
+    const mounted = new Set(keepMounted || []);
+    for (let i = 0, j = startIndex; i < j; i++) {
+      if (mounted.has(i)) {
+        items.push(getListItem(i));
+      } else if (renderPlaceholders) {
+        items.push(getListItem(i, true));
+      }
+    }
+
     for (let i = startIndex, j = endIndex; i <= j; i++) {
       items.push(getListItem(i));
     }
 
-    if (keepMounted) {
-      const startItems: ReactElement[] = [];
-      const endItems: ReactElement[] = [];
-      sort(keepMounted).forEach((index) => {
-        if (index < startIndex) {
-          startItems.push(getListItem(index));
-        }
-        if (index > endIndex) {
-          endItems.push(getListItem(index));
-        }
-      });
-
-      items.unshift(...startItems);
-      items.push(...endItems);
+    for (let i = endIndex + 1, j = count; i < j; i++) {
+      if (mounted.has(i)) {
+        items.push(getListItem(i));
+      } else if (renderPlaceholders) {
+        items.push(getListItem(i, true));
+      }
     }
 
     return (

src/react/WindowVirtualizer.tsx

@@ -238,7 +238,7 @@ export const WindowVirtualizer = forwardRef<
     }, []);
 
     for (let i = startIndex, j = endIndex; i <= j; i++) {
-      const e = getElement(i);
+      const e = getElement(i, false);
       items.push(
         <ListItem
           key={getKey(e, i)}

src/react/useChildren.ts

@@ -5,10 +5,10 @@ import { ItemElement, flattenChildren } from "./utils";
  * @internal
  */
 export const useChildren = (
-  children: ReactNode | ((i: number) => ReactElement),
+  children: ReactNode | ((i: number, placeholder: boolean) => ReactElement),
   count: number | undefined
 ) => {
-  return useMemo((): [(i: number) => ItemElement, number] => {
+  return useMemo((): [(i: number, placeholder: boolean) => ItemElement, number] => {
     if (typeof children === "function") {
       return [children, count || 0];
     }