message: Defers full skeleton render to the client-side
diff: -import React, { useState, useMemo, useCallback } from 'react'
  +import React, { memo, useState, useMemo, useCallback } from 'react'
  import Waypoint from 'react-waypoint'
  import { ApolloClient } from 'apollo-client'
  import { graphql, withApollo } from 'react-apollo'
  import { SortableContainer } from 'react-sortable-hoc'
  +import { first } from 'underscore'
  import sharify from 'sharify'
  import { chunk } from 'v2/util/chunk'
  @@ -13,7 +14,10 @@ import * as ActiveQueriesCollection from 'v2/components/ChannelContents/lib/Acti
  import moveConnectableMutation from 'v2/components/ChannelContents/mutations/moveConnectable'
  -import { ChannelContents as ChannelContentsData } from '__generated__/ChannelContents'
  +import {
  + ChannelContents as ChannelContentsData,
  + ChannelContents_skeleton as ChannelContentsSkeletonData,
  +} from '__generated__/ChannelContents'
  import Grid from 'v2/components/UI/Grid'
  import GridItem from 'v2/components/UI/Grid/components/GridItem'
  @@ -27,6 +31,8 @@ const {
  data: { NODE_ENV },
  } = sharify
  +const isClientSide = typeof window !== 'undefined'
  +
  const SortableGrid = SortableContainer(({ onSortEnd: _onSortEnd, ...rest }) => (
  <Grid {...rest} />
  ))
  @@ -41,20 +47,18 @@ interface ChannelContentsProps extends Props {
  client: ApolloClient<any>
  }
  -const ChannelContents: React.FC<ChannelContentsProps> = ({
  - chunkSize = 10,
  - channel,
  - client,
  - moveConnectable,
  - ...rest
  -}) => {
  +const ChannelContents: React.FC<ChannelContentsProps> = memo(
  + ({ chunkSize = 10, channel, client, moveConnectable, ...rest }) => {
  // Used to load/unload waypoints
  const [activeQueries, setActiveQueries] = useState<
  ActiveQueriesCollection.ActiveQueries
  >({})
  // Handles ordering of block grid items
  - const [connectables, setConnectables] = useState(channel.skeleton)
  + const skeleton: ChannelContentsSkeletonData[] = isClientSide
  + ? channel.skeleton
  + : first(channel.skeleton, chunkSize)
  + const [connectables, setConnectables] = useState(skeleton)
  // Handles actual contents of block grid items
  const [collection, setCollection] = useState(
  @@ -279,6 +283,7 @@ const ChannelContents: React.FC<ChannelContentsProps> = ({
  </>
  )
  }
  +)
  export default graphql<Props>(moveConnectableMutation, {
  name: 'moveConnectable',
  