import React from "react"
import {
  Box,
  Column,
  GridColumns,
  SkeletonBox,
  SkeletonText,
} from "@artsy/palette"
import { PartnerArtistListContainer } from "./PartnerArtistList"

interface PartnerArtistListPlaceholderProps {
  done?: boolean
}

export const PartnerArtistListPlaceholder: React.FC<PartnerArtistListPlaceholderProps> = ({
  done = true,
}) => (
  <PartnerArtistListContainer>
    <GridColumns minWidth={[1100, "auto"]} pr={[2, 0]} gridColumnGap={1}>
      <Column span={12}>
        <SkeletonText variant="mediumText" done={done}>
          Represented Artists
        </SkeletonText>
        <Box style={{ columnCount: 6 }} mt={2}>
          {[...new Array(60)].map((_, i) => {
            return (
              <SkeletonBox key={i} mb={1} done={done}>
                <SkeletonText></SkeletonText>
              </SkeletonBox>
            )
          })}
        </Box>
      </Column>
    </GridColumns>
  </PartnerArtistListContainer>
)

import React from "react"
import { Box, Column, GridColumns, SkeletonText } from "@artsy/palette"
import { PartnerArtistListContainer } from "./PartnerArtistList"

interface PartnerArtistListPlaceholderProps {
  done?: boolean
}

const names = [
  "xxxxxxxxxxxxxxx",
  "xxxxxxxxxx",
  "xxxxxxxxxxxxx",
  "xxxxxxxxxxxxxxx",
  "xxxxxxxxxxxxx",
  "xxxxxxxxxxxxxxxx",
  "xxxxxxxxxxxxxx",
  "xxxxxxxxxxxxxx",
  "xxxxxxxxxxx",
  "xxxxxxxxxxxxxxxxx",
  "xxxxxxxxxxx",
  "xxxxxxxxxxxxxxx",
  "xxxxxxxxxx",
  "xxxxxxxxxxxxx",
]

function getName(i: number) {
  return names[i % names.length]
}

export const PartnerArtistListPlaceholder: React.FC<PartnerArtistListPlaceholderProps> = ({
  done = true,
}) => (
  <PartnerArtistListContainer>
    <GridColumns minWidth={[1100, "auto"]} pr={[2, 0]} gridColumnGap={1}>
      <Column span={12}>
        <SkeletonText variant="mediumText" done={done}>
          Represented Artists
        </SkeletonText>
        <Box style={{ columnCount: 6 }} mt={2}>
          {[...new Array(60)].map((_, i) => {
            return (
              <SkeletonText key={i} mb={1} done={done}>
                {getName(i)}
              </SkeletonText>
            )
          })}
        </Box>
      </Column>
    </GridColumns>
  </PartnerArtistListContainer>
)

Add random width for the placeholder items
Add random width for the placeholder items
