@mui/internal-docs-infra/CoordinatedLazy/CoordinatedLazyClient.mjs

MUI Infra - internal documentation creation tools.

'use client';

import * as React from 'react';
import { useChunk } from "./useChunk.mjs";
import { CoordinatedLazy } from "./CoordinatedLazy.mjs";
import { jsx as _jsx } from "react/jsx-runtime";
function RenderNull() {
  return null;
}

/** Props for {@link CoordinatedLazyClient}. */

/**
 * The client-loading half of {@link createCoordinatedLazy}: loads the piece's
 * data on the client via {@link useChunk}, shows `ChunkLoading` until it is
 * ready, then swaps to `ChunkContent` through {@link CoordinatedLazy}. The
 * isomorphic router renders this only for the client-driven render modes, so the
 * content/loading components here are always client components.
 */
export function CoordinatedLazyClient({
  config,
  props
}) {
  const ChunkContent = config.ChunkContent;
  const ChunkLoading = config.ChunkLoading ?? RenderNull;
  const {
    data,
    loading,
    revalidating,
    refresh
  } = useChunk(config, props);
  const userProps = props.userProps ?? {};

  // Spreading the generic `T` alongside the fixed fields needs an assertion; the
  // shape matches `ChunkContentProps<T, P>` / `ChunkLoadingProps<T, P>`. The
  // content also receives `refresh`/`revalidating` so it can trigger a
  // stale-while-revalidate reload.
  const contentProps = {
    ...userProps,
    data,
    loading: false,
    refresh,
    revalidating
  };
  const loadingProps = {
    ...userProps,
    data,
    loading: true
  };

  // `gate` is left to `CoordinatedLazy`: an explicit `props.gate` wins, otherwise
  // it registers with the ambient controller gate (if any).
  return /*#__PURE__*/_jsx(CoordinatedLazy, {
    ready: !loading,
    defer: config.swap?.defer,
    requireHoist: config.swap?.requireHoist,
    gate: props.gate,
    content: /*#__PURE__*/_jsx(ChunkContent, {
      ...contentProps
    }),
    fallback: /*#__PURE__*/_jsx(ChunkLoading, {
      ...loadingProps
    })
  });
}