/**
 * TEAM: frontend_infra
 * @flow strict
 */

import * as React from "react";
import {
  RawDragHandle,
  RawSortableElement,
  RawSortableContainer,
} from "./RawComponents";
import type {Props} from "./index";

/** A placeholder view for while react-sortable-hoc is lazily loaded */
function LoadingPlaceholder<T>({
  tiles,
  renderTile,
  getUniqueTileId,
}: Props<T>): React.Node {
  return (
    <RawSortableContainer>
      {tiles.map((tile, index) => (
        <RawSortableElement
          key={getUniqueTileId(tile)}
          passthroughIndex={index}
          tile={tile}
          renderTile={renderTile}
          dragHandle={<RawDragHandle />}
        />
      ))}
    </RawSortableContainer>
  );
}

export default LoadingPlaceholder;