 
   render: ->
 
+    { loading } = @props
+
     <div>
       <Content>{@renderHeader()}</Content>
-      <Content>{@renderTrialChargeInfo()}</Content>
-      <Content>{@renderExtras()}</Content>
+      {not loading and <Content>{@renderTrialChargeInfo()}</Content>}
+      {not loading and <Content>{@renderExtras()}</Content>}
     </div>
 
 

  title: PropTypes.string
  pricePerSeat: PropTypes.number.isRequired
  teamSize: PropTypes.number
  endsAt: PropTypes.string.isRequired
  freeCredit: PropTypes.string
  isSurveyTaken: PropTypes.bool
  isEmailVerified: PropTypes.bool


  renderHeader: ->

    { loading, teamSize, pricePerSeat
      isTrial, freeCredit, endsAt, title } = @props

    nextAmount = Number(teamSize) * Number(pricePerSeat)

    <SubscriptionHeader
      loading={loading}
      isTrial={isTrial}
      title={title}
      teamSize={teamSize}
