@applicaster/zapp-react-native-ui-components 16.0.0-alpha.6861239588 → 16.0.0-alpha.6918106967

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -9,6 +9,7 @@ import {
   platformSelect,
   isAndroidTVPlatform,
   isTvOSPlatform,
+  isApplePlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import {
   isAudioItem,
@@ -60,6 +61,7 @@ import {
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
 import { useAppData } from "@applicaster/zapp-react-native-redux";
+import { PLAYER_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/const";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -188,12 +190,10 @@ const renderApplePlayer = ({
     return null;
   }
 
-  const { title, summary } = item || {};
-
+  // Title/Subtitle are not resolved here: `ProgramInfo` reads them from the
+  // player manager's content channel via `usePlayerContent`.
   return (
     <ProgramInfo
-      title={title}
-      subtitle={summary}
       plugin_configuration={pluginConfiguration}
       videoStyle={videoStyle}
     />
@@ -282,12 +282,16 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     log_debug(
-      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}`
+      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}, outgoing item id: ${item?.id}`
     );
 
+    playNextOverlayState.hidePlayNext();
+
+    playerEvent(PLAYER_EVENTS.PlayNextTriggered, { id: item?.id });
+
     setIsLoadingNextVideo(true);
     playEntry(playNextOverlayState.entry);
-  }, [playNextOverlayState]);
+  }, [playNextOverlayState, item?.id]);
 
   const playNextData: Nullable<PlayNextData> = React.useMemo(() => {
     if (!playNextOverlayState) {
@@ -495,7 +499,7 @@ const PlayerContainerComponent = (props: Props) => {
   const isAudioContent = isAudioItem(item);
 
   useEffect(() => {
-    if (!isAudioContent) {
+    if (!isAudioContent && isApplePlatform()) {
       sendQuickBrickEvent(
         QUICK_BRICK_EVENTS.IDLE_TIMER_DISABLED as QuickBrickEvent,
         {

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -7,12 +7,11 @@ import * as React from "react";
 import { Text, TextStyle, View, ViewStyle } from "react-native";
 import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
+import { usePlayerContent } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayerContent";
 import * as programStyles from "./styles";
 
 type Props = {
   logo?: string;
-  title: string;
-  subtitle: string;
   isAudioContent: boolean;
   styles: {};
   plugin_configuration: {
@@ -28,13 +27,13 @@ const defaultColor = "#EFEFEF";
 
 function ProgramInfoComponent({
   logo,
-  title = "",
-  subtitle = "",
   isAudioContent,
   styles,
   plugin_configuration = {},
   videoStyle = {},
 }: Props) {
+  const { title = "", summary: subtitle = "" } = usePlayerContent();
+
   const platformKey = styleKeys.style_namespace;
 
   const colorTitle =

package/Components/PlayerContainer/__tests__/PlayerContainer.test.tsx

@@ -17,16 +17,37 @@ jest.mock(
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  // Defaults to `false` for the hardware-back-handling tests below, which
+  // key off `isTV`. The ProgramInfo/content-context describe block below
+  // overrides this per test (`isTV()` is also what PlayerContainer's
+  // `playerContentValue` uses to pick TV vs mobile data keys, decoupled
+  // from `isTvOSPlatform` below).
   isTV: jest.fn(() => false),
   isAndroidTVPlatform: jest.fn(() => false),
-  isTvOSPlatform: jest.fn(() => false),
+  // `isTvOSPlatform` backs a module-level constant in PlayerContainer.tsx that
+  // is read once at import time, so it must already be `true` here in order
+  // to exercise `renderApplePlayer`'s tvOS-only ProgramInfo branch in this
+  // test file. It does not affect the hardware-back-handling tests below,
+  // which key off `isTV` instead.
+  isTvOSPlatform: jest.fn(() => true),
+  isApplePlatform: jest.fn(() => true),
   platformSelect: jest.fn(({ native }) => native),
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/playerUtils", () => ({
-  isAudioItem: jest.fn(() => false),
-  isInlineTV: jest.fn(() => false),
-}));
+jest.mock("@applicaster/zapp-react-native-utils/playerUtils", () => {
+  // Keep the real data-key resolver (createConfigValueGetter,
+  // resolvePlayerContentText, VIDEO_PLAYER_CONTENT_DATA_KEYS) so the tvOS
+  // ProgramInfo data-key tests exercise actual resolution logic, not a stub.
+  const actual = jest.requireActual(
+    "@applicaster/zapp-react-native-utils/playerUtils"
+  );
+
+  return {
+    ...actual,
+    isAudioItem: jest.fn(() => false),
+    isInlineTV: jest.fn(() => false),
+  };
+});
 
 jest.mock(
   "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent",
@@ -75,6 +96,11 @@ jest.mock("@applicaster/zapp-react-native-bridge/QuickBrick", () => ({
   sendQuickBrickEvent: jest.fn(),
 }));
 
+// Stubbed so PlayerContainer can render without ProgramInfo's own
+// redux/style plumbing. It no longer needs to capture Title/Subtitle: those
+// come from the player manager's content channel, and the key-set selection
+// they depend on is covered directly in
+// `playerManager/__tests__/playerContent.test.ts`.
 jest.mock("../ProgramInfo", () => ({
   ProgramInfo: () => null,
 }));
@@ -142,14 +168,33 @@ jest.mock(
 jest.mock("../PlayerContainerContext", () => {
   const ReactActual = require("react");
 
+  const PlayerContainerContext = ReactActual.createContext({
+    isLanguageOverlayVisible: false,
+    bottomFocusableId: "bottom",
+    showComponentsContainer: false,
+    refs: null,
+  });
+
   return {
-    PlayerContainerContext: ReactActual.createContext({
-      isLanguageOverlayVisible: false,
-      bottomFocusableId: "bottom",
-      showComponentsContainer: false,
-      refs: null,
-    }),
-    PlayerContainerContextProvider: ({ children }) => children,
+    PlayerContainerContext,
+    // Mirrors just enough of the real provider for these tests: renders an
+    // actual `PlayerContainerContext.Provider` so the real
+    // `PlayerContainerContext.Consumer` inside PlayerContainer.tsx sees the
+    // container fields a real provider would give it, instead of a bare
+    // `({ children }) => children` passthrough.
+    PlayerContainerContextProvider: ({ children }: any) =>
+      ReactActual.createElement(
+        PlayerContainerContext.Provider,
+        {
+          value: {
+            isLanguageOverlayVisible: false,
+            bottomFocusableId: "bottom",
+            showComponentsContainer: false,
+            refs: null,
+          },
+        },
+        children
+      ),
   };
 });
 
@@ -200,7 +245,14 @@ const { __player: mockPlayer } = jest.requireMock(
   "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer"
 );
 
-const Player = React.forwardRef(() => null);
+const { isTV: mockIsTV } = jest.requireMock(
+  "@applicaster/zapp-react-native-utils/reactUtils"
+);
+
+// Renders children so that `renderApplePlayer`'s returned <ProgramInfo>
+// element (passed as this component's `children` prop) actually mounts —
+// otherwise React never invokes the ProgramInfo function component at all.
+const Player = React.forwardRef((props: any, _ref) => props.children ?? null);
 
 const item = {
   id: "entry-1",
@@ -234,6 +286,7 @@ const pressHardwareBack = () => {
 describe("PlayerContainer hardware back handling", () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockIsTV.mockReturnValue(false);
     mockBackHandlerRef.current = null;
     mockPlayer.getPluginConfiguration.mockReturnValue({});
     mockPlayer.isPaused.mockReturnValue(false);

package/Components/PreloaderWrapper/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type PreloaderWrapperProps = {
   showPreloader?: boolean;
-  children?: React.ReactNode;
+  children: React.ReactElement | null;
 };
 
 export const PreloaderWrapper: React.FC<PreloaderWrapperProps> = ({

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 import { FlatList, StyleSheet, View } from "react-native";
+import { SafeAreaView, EdgeMode, Edge } from "react-native-safe-area-context";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -40,6 +41,12 @@ type Props = {
   riverId?: string;
   getStaticComponentFeed: any;
   stickyHeaderIndices?: number[];
+  safeArea?:
+    | {
+        edges: Record<Edge, EdgeMode>;
+        mode: "padding" | "margin" | undefined;
+      }
+    | undefined;
 };
 
 const styles = StyleSheet.create({
@@ -64,6 +71,7 @@ function ComponentsMapComponent(props: Props) {
     riverId,
     getStaticComponentFeed,
     stickyHeaderIndices,
+    safeArea,
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
@@ -121,14 +129,6 @@ function ComponentsMapComponent(props: Props) {
 
   const screenStyle = React.useMemo(
     () => ({
-      paddingTop: ifEmptyUseFallback(
-        screenConfig.paddingTop,
-        R.prop("screen_padding_top")(theme)
-      ),
-      paddingBottom: ifEmptyUseFallback(
-        screenConfig.paddingBottom,
-        R.prop("screen_padding_bottom")(theme)
-      ),
       paddingLeft: ifEmptyUseFallback(
         screenConfig.paddingLeft,
         R.prop("screen_padding_left")(theme)
@@ -266,51 +266,79 @@ function ComponentsMapComponent(props: Props) {
             numberOfComponents={riverComponents.length}
           >
             <ViewportTracker>
-              <FlatList
-                testID="components-map-flat-list"
-                ref={(ref) => {
-                  flatListRef.current = ref;
-                }}
-                // Fix for WebView rerender crashes on Android API 28+
-                // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
-                overScrollMode={isAndroid ? "never" : "auto"}
-                scrollIndicatorInsets={scrollIndicatorInsets}
-                extraData={feed}
-                stickyHeaderIndices={stickyHeaderIndices}
-                removeClippedSubviews={isAndroid}
-                onLayout={handleOnLayout}
-                initialNumToRender={3}
-                maxToRenderPerBatch={10}
-                windowSize={12}
-                keyExtractor={keyExtractor}
-                renderItem={renderRiverItem}
-                data={riverComponents}
-                contentContainerStyle={contentContainerStyle}
-                ListFooterComponent={
-                  <RiverFooter
-                    flatListHeight={flatListHeight}
-                    loadingState={loadingState}
-                  />
-                }
-                refreshControl={refreshControl}
-                onScrollBeginDrag={onScrollBeginDrag}
-                onScroll={onScroll}
-                onMomentumScrollEnd={_onMomentumScrollEnd}
-                onScrollEndDrag={_onScrollEndDrag}
-                scrollEventThrottle={16}
-                {...scrollViewExtraProps}
-                onEndReached={
-                  /* When wrapped in a parent ScrollView (e.g. tabs),
+              <>
+                <FlatList
+                  ListHeaderComponent={
+                    <SafeAreaView
+                      mode="margin"
+                      style={{
+                        paddingTop: ifEmptyUseFallback(
+                          screenConfig.paddingTop,
+                          R.prop("screen_padding_top")(theme)
+                        ),
+                        height: StyleSheet.hairlineWidth,
+                      }}
+                      edges={{ top: safeArea?.edges?.top ?? "off" }}
+                    />
+                  }
+                  testID="components-map-flat-list"
+                  ref={(ref) => {
+                    flatListRef.current = ref;
+                  }}
+                  // Fix for WebView rerender crashes on Android API 28+
+                  // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
+                  overScrollMode={isAndroid ? "never" : "auto"}
+                  scrollIndicatorInsets={scrollIndicatorInsets}
+                  extraData={feed}
+                  stickyHeaderIndices={stickyHeaderIndices}
+                  removeClippedSubviews={isAndroid}
+                  onLayout={handleOnLayout}
+                  initialNumToRender={3}
+                  maxToRenderPerBatch={10}
+                  windowSize={12}
+                  keyExtractor={keyExtractor}
+                  renderItem={renderRiverItem}
+                  data={riverComponents}
+                  contentContainerStyle={contentContainerStyle}
+                  ListFooterComponent={
+                    <>
+                      <RiverFooter
+                        flatListHeight={flatListHeight}
+                        loadingState={loadingState}
+                      />
+                      <SafeAreaView
+                        mode="margin"
+                        style={{
+                          paddingBottom: ifEmptyUseFallback(
+                            screenConfig.paddingBottom,
+                            R.prop("screen_padding_bottom")(theme)
+                          ),
+                          height: StyleSheet.hairlineWidth,
+                        }}
+                        edges={{ bottom: safeArea?.edges?.bottom ?? "off" }}
+                      />
+                    </>
+                  }
+                  refreshControl={refreshControl}
+                  onScrollBeginDrag={onScrollBeginDrag}
+                  onScroll={onScroll}
+                  onMomentumScrollEnd={_onMomentumScrollEnd}
+                  onScrollEndDrag={_onScrollEndDrag}
+                  scrollEventThrottle={16}
+                  {...scrollViewExtraProps}
+                  onEndReached={
+                    /* When wrapped in a parent ScrollView (e.g. tabs),
                   this FlatList doesn't scroll so onEndReached can fire repeatedly;
                   skip it here and let the parent ScrollView emit scroll-end instead. */
-                  isScreenWrappedInContainer
-                    ? undefined
-                    : () => {
-                        if (!hasUserScrolledRef.current) return;
-                        emitScrollEndReached();
-                      }
-                }
-              />
+                    isScreenWrappedInContainer
+                      ? undefined
+                      : () => {
+                          if (!hasUserScrolledRef.current) return;
+                          emitScrollEndReached();
+                        }
+                  }
+                />
+              </>
             </ViewportTracker>
           </ScreenLoadingMeasurements>
         </ComponentsMapRefContext.Provider>

package/Components/River/River.tsx

@@ -20,6 +20,8 @@ type Props = ZappScreenProps & {
   setIsScreenWrappedInContainer: (isInsideContainer: boolean) => void;
   screenContext: ZappRiver;
   river: ZappRiver;
+  /** Result channel for screens presented as a modal; forwarded to the resolved screen. */
+  resultCallback?: hookCallback;
 };
 
 export class RiverComponent extends React.Component<Props> {
@@ -64,6 +66,7 @@ export class RiverComponent extends React.Component<Props> {
       isInsideContainer,
       groupId,
       scrollViewExtraProps,
+      resultCallback,
     } = this.props;
 
     const { id, type } = river;
@@ -77,6 +80,7 @@ export class RiverComponent extends React.Component<Props> {
           })}
           screenId={id}
           screenType={type}
+          resultCallback={resultCallback}
         />
       );
     }

package/Components/River/__tests__/resultCallback.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { RiverComponent } from "../River";
+
+const mockResolverProps: any[] = [];
+
+jest.mock("../../ScreenResolver", () => ({
+  ScreenResolver: (props: any) => {
+    mockResolverProps.push(props);
+
+    return null;
+  },
+}));
+
+const river = { id: "river-parent-lock", type: "parent_lock" } as any;
+
+const baseProps = {
+  river,
+  screenData: {},
+  groupId: "group-1",
+  scrollViewExtraProps: {},
+  setIsScreenWrappedInContainer: jest.fn(),
+  screenContext: { navBar: { setTitle: jest.fn(), setSummary: jest.fn() } },
+} as any;
+
+const resolved = () => mockResolverProps[mockResolverProps.length - 1];
+
+describe("RiverComponent", () => {
+  beforeEach(() => {
+    mockResolverProps.length = 0;
+  });
+
+  it("forwards resultCallback to the screen it resolves", () => {
+    const resultCallback = jest.fn();
+
+    render(<RiverComponent {...baseProps} resultCallback={resultCallback} />);
+
+    expect(resolved().resultCallback).toBe(resultCallback);
+  });
+
+  it("resolves the screen without a resultCallback when none was given", () => {
+    render(<RiverComponent {...baseProps} />);
+
+    expect(resolved().resultCallback).toBeUndefined();
+  });
+});

package/Components/ScreenFeedLoader/ScreenFeedLoader.tsx

@@ -8,9 +8,11 @@ import { componentsLogger } from "../../Helpers/logger";
 const logger = componentsLogger.addSubsystem("ScreenFeedLoader");
 
 /** Loads and provides `feedData` and store to  */
-export const ScreenFeedLoader: React.FC<
-  React.PropsWithChildren<{ id: string; feedData: any }>
-> = ({ id, feedData, children }) => {
+export const ScreenFeedLoader: React.FC<{
+  id: string;
+  feedData: any;
+  children: React.ReactElement | null;
+}> = ({ id, feedData, children }) => {
   const { source: feedUrl, mapping } = feedData;
 
   const { data, loading, error } = useFeedLoader({

package/Components/ScreenResolverFeedProvider/ScreenResolverFeedProvider.tsx

@@ -8,7 +8,7 @@ export const ScreenResolverFeedProvider = ({
   useFeedData,
 }: {
   id: string;
-  children: React.ReactNode;
+  children: React.ReactElement | null;
   useFeedData: (id: string) => Option<ZappDataSource>;
 }) => {
   const feedData = useFeedData(id);

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -42,9 +42,25 @@ export class ScreenRevealManager {
   private subject$ = new Subject<void>();
   private subscription: Subscription;
 
-  constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
+  /**
+   * @param initialNumberToLoad how many components to wait for before revealing
+   * the screen. Staggering exists so a screen full of network-backed components
+   * does not load them all at once. A caller that has nothing to stagger - see
+   * `disableIncrementalLoading` on the HOC - passes the full count here so the
+   * reveal waits for exactly what gets rendered. Omitted, the count is derived
+   * from the components themselves.
+   */
+  constructor(
+    componentsToRender: ZappUIComponent[],
+    callback: Callback,
+    initialNumberToLoad?: number
+  ) {
     this.numberOfComponentsWaitToLoadBeforePresent =
-      getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender);
+      initialNumberToLoad == null
+        ? getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender)
+        : // Clamped like the computed path: waiting for components that do not
+          // exist would hold the screen behind its overlay until the timeout.
+          Math.min(initialNumberToLoad, componentsToRender.length);
 
     this.renderingState = makeListOf<ComponentLoadingState>(
       COMPONENT_LOADING_STATE.UNKNOWN,

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -22,6 +22,42 @@ import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
 import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
+describe("ScreenRevealManager explicit component count", () => {
+  beforeEach(() => {
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(false);
+
+    (makeListOf as jest.Mock).mockImplementation((value, length) =>
+      Array(length).fill(value)
+    );
+
+    (withTimeout$ as jest.Mock).mockReturnValue(new Subject());
+  });
+
+  it("waits for the number of components it is given, not the computed default", () => {
+    const components = Array(6).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn(), 6);
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(6);
+  });
+
+  it("never waits for more components than it was handed", () => {
+    const components = Array(3).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn(), 10);
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+  });
+
+  it("falls back to the computed default when given no explicit count", () => {
+    const components = Array(6).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn());
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+  });
+});
+
 describe("ScreenRevealManager", () => {
   let mockCallback: jest.Mock;
   let timeout$: Subject<void>;

package/Components/ScreenRevealManager/__tests__/withScreenRevealManager.test.tsx

@@ -9,6 +9,12 @@ import {
   TIMEOUT,
 } from "../withScreenRevealManager";
 
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: () => ({ app_background_color: "#000000" }),
+}));
+
+jest.mock("../Overlay", () => ({ Overlay: () => null }));
+
 // jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
 
 const MockComponent = ({
@@ -37,6 +43,56 @@ const MockComponent = ({
 
 const WrappedComponent = withScreenRevealManager(MockComponent);
 
+describe("withScreenRevealManager disableIncrementalLoading", () => {
+  const components = (count: number) =>
+    Array(count).fill({ component_type: "grid-qb" });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("asks for every component at once when incremental loading is disabled", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={components(6)}
+        disableIncrementalLoading
+      />
+    );
+
+    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
+      6
+    );
+  });
+
+  it("still tracks the component count after it changes", () => {
+    const { rerender } = render(
+      <WrappedComponent
+        componentsToRender={components(6)}
+        disableIncrementalLoading
+      />
+    );
+
+    rerender(
+      <WrappedComponent
+        componentsToRender={components(9)}
+        disableIncrementalLoading
+      />
+    );
+
+    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
+      9
+    );
+  });
+
+  it("loads incrementally when the flag is not set", () => {
+    render(<WrappedComponent componentsToRender={components(6)} />);
+
+    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
+      3
+    );
+  });
+});
+
 describe.skip("withScreenRevealManager", () => {
   beforeEach(() => {
     jest.clearAllMocks();

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -21,11 +21,23 @@ export const SHOWN = 1; // opacity = 1
 type Props = {
   componentsToRender: ZappUIComponent[];
   backgroundColor?: string;
+  /**
+   * Renders every component at once instead of revealing them a few at a time.
+   *
+   * For a screen that builds its own components and holds all of them already -
+   * a form, say - staggering buys nothing and costs: each rebuild of the list
+   * tears it back down to the first few and lets the rest crawl in again.
+   *
+   * This is a flag rather than a count on purpose. A count would have to be
+   * re-read whenever the number of components changes, while "do not stagger"
+   * stays true whatever the screen ends up holding.
+   */
+  disableIncrementalLoading?: boolean;
 };
 
 export const withScreenRevealManager = (Component) => {
   return function WithScreenRevealManager(props: Props) {
-    const { componentsToRender } = props;
+    const { componentsToRender, disableIncrementalLoading } = props;
 
     const [isContentReadyToBeShown, setIsContentReadyToBeShown] =
       React.useState(false);
@@ -42,7 +54,8 @@ export const withScreenRevealManager = (Component) => {
       () =>
         new ScreenRevealManager(
           componentsToRender,
-          handleSetIsContentReadyToBeShown
+          handleSetIsContentReadyToBeShown,
+          disableIncrementalLoading ? componentsToRender.length : undefined
         )
     );
 
@@ -80,7 +93,11 @@ export const withScreenRevealManager = (Component) => {
         <Component
           {...props}
           initialNumberToLoad={
-            managerRef.current.numberOfComponentsWaitToLoadBeforePresent
+            // Recomputed on every render, so the count follows the components
+            // even though the manager settled its own expectation at mount.
+            disableIncrementalLoading
+              ? componentsToRender.length
+              : managerRef.current.numberOfComponentsWaitToLoadBeforePresent
           }
           onLoadFinishedFromScreenRevealManager={
             managerRef.current.onLoadFinished