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>
)

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>
)

--- 
+++ 
@@ -1,15 +1,30 @@
 import React from "react"
-import {
-  Box,
-  Column,
-  GridColumns,
-  SkeletonBox,
-  SkeletonText,
-} from "@artsy/palette"
+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> = ({
@@ -24,9 +39,9 @@
         <Box style={{ columnCount: 6 }} mt={2}>
           {[...new Array(60)].map((_, i) => {
             return (
-              <SkeletonBox key={i} mb={1} done={done}>
-                <SkeletonText></SkeletonText>
-              </SkeletonBox>
+              <SkeletonText key={i} mb={1} done={done}>
+                {getName(i)}
+              </SkeletonText>
             )
           })}
         </Box>
Add random width for the placeholder items
