count

cursor

userId

userQuery

Viewer_viewer

user

User_user

User_discussionList

User_groupList

viewer

name

username

profilePicture

profilePictureName

discussionCount

followerCount

followingCount

isViewer

viewerFollows

followsViewer

discussions

groupsIn

query userQuery(
  $count: Int!
  $cursor: String
  $userId: ID!
) {
  ...Viewer_viewer
  user(id: $userId) {
    ...User_user
    ...User_discussionList
    ...User_groupList
    id
  }
}

fragment CommentListItem_comment on Comment {
  id
  _id
  body
  createdAt
  discussionId
  excerpt
  discussion {
    id
    _id
  }
  user {
    id
    _id
    name
    username
    profilePicture
    profilePictureName
  }
}

fragment DiscussionLike_discussion on Discussion {
  id
  _id
  viewerDoesLike
  likeCount
}

fragment FollowButton_user on User {
  _id
  name
  viewerFollows
  followsViewer
}

fragment GroupListItem_group on Group {
  id
  _id
  name
  permalink
  publicUrl
  headerImage {
    name
    id
  }
}

fragment Poll_discussion on Discussion {
  votingHasEnded
  viewerHasVoted
  hideVotes
  hasPoll
  viewerOwns
  voteCount
  pollClosesAt
  poll(first: 20) {
    edges {
      node {
        id
        _id
        title
        voteCount
        viewerSelected
        __typename
      }
      cursor
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

fragment PostListItem_discussion on Discussion {
  id
  _id
  name
  reads
  publicUrl
  parsedExcerpt(size: 30)
  wordCount
  commentCount
  permalink
  comments(last: 3) {
    pageInfo {
      hasNextPage
      endCursor
      hasPreviousPage
      startCursor
    }
    edges {
      node {
        id
        excerpt
        ...CommentListItem_comment
        __typename
      }
      cursor
    }
  }
  createdAt
  user {
    id
    _id
    name
    username
    profilePicture
    profilePictureName
  }
  group {
    id
    _id
    name
    permalink
    publicUrl
  }
  featurePhoto {
    id
    _id
    height
    width
    name
  }
  hasPoll
  ...DiscussionLike_discussion
  ...Poll_discussion
}

fragment User_discussionList on User {
  discussions(first: $count, after: $cursor, byLatest: true) {
    pageInfo {
      hasNextPage
      endCursor
    }
    edges {
      node {
        id
        ...PostListItem_discussion
        __typename
      }
      cursor
    }
  }
}

fragment User_groupList on User {
  groupsIn(first: $count, after: $cursor) {
    pageInfo {
      hasNextPage
      endCursor
    }
    edges {
      node {
        id
        ...GroupListItem_group
        __typename
      }
      cursor
    }
  }
}

fragment User_user on User {
  id
  _id
  name
  bio
  username
  profilePicture(size: 250)
  profilePictureName
  discussionCount
  followerCount
  followingCount
  isViewer
  ...FollowButton_user
}

fragment Viewer_viewer on Query {
  viewer {
    name
    username
    profilePicture(size: 50)
    profilePictureName
    _id
    id
  }
}


Hello John. 
Such "Dynamic Progress Bars" are usually achieved using dynamic routing.

Normally, when you access a resource in your browser, the browser makes a request to a web server. The browser gets a HTML response which it then renders. When you click a link, the same process is applied. So, the browser always requests a fresh copy of resources. This is a bit wasteful. Especially for resources like JS and CSS which never really change.

Enter JS routing(Actually dynamic routing). When the browser requests for the first time a "shell page" is returned. 
For all future requests, which are handled by whatever framework in use, as opposed to the browser, only the required content is sent back. Everything that's already been sent is not resent. This response is then fitted into the shell page as required.

Just like most other things, you could use a ready made solution(such as wiselinks) or a custom solution. Either way is fine.

As to how TC does it, well, I can't tell you that😜. But it's pretty much the same thing.

Hope this helps.

Dear Obaseki,
That's quite a write up there Sir. I hope it helps too. 
Thanks.