@wix/editor-react-components 1.2546.0 → 1.2547.0

package/dist/site/components/Repeater/LoadMoreButton.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 type Props = {
     onLoadMore: () => Promise<void>;
     isLoading: boolean;
+    disabled?: boolean;
     label?: string;
 };
 export declare const LoadMoreButton: React.FC<Props>;

package/dist/site/components/Repeater/component.js

@@ -4,65 +4,55 @@ import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { D as DEFAULT_ITEMS_PER_ROW, C as COLUMN_COUNT_CSS_VAR, T as TestIds, s as semanticClassNames } from "../chunks/constants23.js";
-import React__default, { useState, useRef, useEffect, useCallback, forwardRef } from "react";
-const useAsyncLoadMore = (onLoadMore, itemsLength, isLoadingProp) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
-  const itemsLengthAtLastLoad = useRef(null);
-  useEffect(() => {
-    setHasMore(true);
-    itemsLengthAtLastLoad.current = null;
-  }, [onLoadMore]);
-  useEffect(() => {
-    if (itemsLengthAtLastLoad.current === null) return;
-    setHasMore(itemsLength > itemsLengthAtLastLoad.current);
-    itemsLengthAtLastLoad.current = null;
-  }, [itemsLength]);
-  const handleLoadMore = useCallback(async () => {
-    itemsLengthAtLastLoad.current = itemsLength;
-    setIsLoading(true);
+import React__default, { useState, useRef, useCallback, useEffect, forwardRef } from "react";
+const useAsyncLoadMore = (onLoadMore, itemsLength, isIntersecting, isLoadingProp) => {
+  const [internalLoading, setInternalLoading] = useState(false);
+  const [requested, setRequested] = useState(false);
+  const inFlightRef = useRef(false);
+  const isLoading = isLoadingProp ?? internalLoading;
+  const load = useCallback(async () => {
+    if (inFlightRef.current) {
+      return;
+    }
+    inFlightRef.current = true;
+    setRequested(true);
+    setInternalLoading(true);
     try {
       await (onLoadMore == null ? void 0 : onLoadMore());
     } catch {
     } finally {
-      setIsLoading(false);
-      if (itemsLengthAtLastLoad.current !== null) {
-        setHasMore(false);
-        itemsLengthAtLastLoad.current = null;
-      }
+      inFlightRef.current = false;
+      setInternalLoading(false);
     }
-  }, [onLoadMore, itemsLength]);
-  return { isLoading: isLoadingProp ?? isLoading, handleLoadMore, hasMore };
-};
-const useLoadMoreObserver = ({
-  enabled,
-  onLoadMore
-}) => {
-  const sentinelRef = useRef(null);
-  const onLoadMoreRef = useRef(onLoadMore);
-  useEffect(() => {
-    onLoadMoreRef.current = onLoadMore;
   }, [onLoadMore]);
   useEffect(() => {
-    if (!enabled) {
+    setRequested(false);
+  }, [itemsLength]);
+  useEffect(() => {
+    if (!onLoadMore || !isIntersecting || isLoading || internalLoading || requested) {
       return;
     }
-    if (!sentinelRef.current) {
+    load();
+  }, [onLoadMore, isIntersecting, isLoading, internalLoading, requested, load]);
+  const hasReachedEnd = requested && !isLoading && !internalLoading;
+  return { isLoading, load, hasReachedEnd };
+};
+const useLoadMoreObserver = (enabled) => {
+  const sentinelRef = useRef(null);
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  useEffect(() => {
+    if (!enabled || !sentinelRef.current) {
+      setIsIntersecting(false);
       return;
     }
     const observer = new IntersectionObserver(
-      ([entry]) => {
-        var _a;
-        if (entry.isIntersecting) {
-          (_a = onLoadMoreRef.current) == null ? void 0 : _a.call(onLoadMoreRef);
-        }
-      },
+      ([entry]) => setIsIntersecting(entry.isIntersecting),
       { rootMargin: "200px" }
     );
     observer.observe(sentinelRef.current);
     return () => observer.disconnect();
   }, [enabled]);
-  return sentinelRef;
+  return [sentinelRef, isIntersecting];
 };
 const useItemsPerRow = (shouldMeasure) => {
   const ref = useRef(null);
@@ -454,6 +444,7 @@ const LiveAnnouncer = ({
 const LoadMoreButton = ({
   onLoadMore,
   isLoading,
+  disabled,
   label = "Load more items"
 }) => /* @__PURE__ */ jsx(
   "button",
@@ -462,7 +453,7 @@ const LoadMoreButton = ({
     "data-testid": TestIds.loadMoreButton,
     className: styles.loadMoreTrigger,
     onClick: onLoadMore,
-    disabled: isLoading,
+    disabled: disabled ?? isLoading,
     "aria-busy": isLoading || void 0,
     children: label
   }
@@ -488,16 +479,17 @@ const Repeater = (props) => {
     emptyState
   } = props;
   const presetsWrapperProps = ((_a = props.wix) == null ? void 0 : _a.presetsWrapperProps) || {};
-  const { isLoading, handleLoadMore, hasMore } = useAsyncLoadMore(
+  const showsEmptyState = items.length === 0 && !!emptyState;
+  const [sentinelRef, isIntersecting] = useLoadMoreObserver(
+    !!onLoadMore && !showsEmptyState
+  );
+  const { isLoading, load, hasReachedEnd } = useAsyncLoadMore(
     onLoadMore,
     items.length,
+    isIntersecting,
     isLoadingProp
   );
   const [ulRef, itemsPerRow] = useItemsPerRow(!!onLoadMore);
-  const sentinelRef = useLoadMoreObserver({
-    enabled: !!onLoadMore && hasMore,
-    onLoadMore: onLoadMore ? handleLoadMore : void 0
-  });
   if (!items.length && emptyState) {
     return null;
   }
@@ -551,8 +543,15 @@ const Repeater = (props) => {
             ]
           }
         ),
-        !!onLoadMore && hasMore && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(LoadMoreButton, { onLoadMore: handleLoadMore, isLoading }),
+        !!onLoadMore && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            LoadMoreButton,
+            {
+              onLoadMore: load,
+              isLoading,
+              disabled: isLoading || hasReachedEnd
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -567,7 +566,7 @@ const Repeater = (props) => {
           LiveAnnouncer,
           {
             itemCount: items.length,
-            hasMore,
+            hasMore: !hasReachedEnd,
             onLoadMore
           }
         )

package/dist/site/components/Repeater/hooks/useAsyncLoadMore.d.ts

@@ -1,5 +1,5 @@
-export declare const useAsyncLoadMore: (onLoadMore: (() => Promise<void>) | undefined, itemsLength: number, isLoadingProp?: boolean) => {
+export declare const useAsyncLoadMore: (onLoadMore: (() => Promise<void>) | undefined, itemsLength: number, isIntersecting: boolean, isLoadingProp?: boolean) => {
     isLoading: boolean;
-    handleLoadMore: () => Promise<void>;
-    hasMore: boolean;
+    load: () => Promise<void>;
+    hasReachedEnd: boolean;
 };

package/dist/site/components/Repeater/hooks/useLoadMoreObserver.d.ts

@@ -1,6 +1 @@
-type UseLoadMoreObserverArgs = {
-    enabled: boolean;
-    onLoadMore: (() => void) | undefined;
-};
-export declare const useLoadMoreObserver: ({ enabled, onLoadMore, }: UseLoadMoreObserverArgs) => import('react').RefObject<HTMLDivElement>;
-export {};
+export declare const useLoadMoreObserver: (enabled: boolean) => readonly [import('react').RefObject<HTMLDivElement>, boolean];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2546.0",
+  "version": "1.2547.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -199,5 +199,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "6832479dbb355187b2c0df1c8c54e23813710645d19f71fbc0dd9b98"
+  "falconPackageHash": "c7ba27661995f7a2dd1bc00316e63d251c0775294e71c8fd98523b71"
 }