         </SubjectViewer>
       </div>
 
-    <div className="collections-show">
-      {if @state.isLoading
-        <Loading />}
+    pendingFunc = ->
+      <Loading />
 
-      {if @state.errorThrown
-        <Translate component="p" className="form-help error" content="collectionSubjectListPage.error" />}
+    catchFunc = ->
+      <Translate component="p" className="form-help error" content="collectionSubjectListPage.error" />
 
-      {if @state.subjects.length is 0 && !@state.isLoading && !@state.errorThrown
-        <Translate component="p" content="collectionSubjectListPage.noSubjects" />}
+    thenFunc = (subjects) =>
+      <div className="collections-show">
+        {if subjects.length is 0
+          <Translate component="p" content="collectionSubjectListPage.noSubjects" />}
 
-      {if @state.subjects.length > 0 && !@state.isLoading
-        <div>
-          <div className="collection-subjects-list">{@state.subjects.map(subjectNode)}</div>
+        {if subjects.length > 0
+          <div>
+            <div className="collection-subjects-list">{subjects.map(subjectNode)}</div>
 
-          <Paginator
-            page={+@props.query.page}
-            onPageChange={@onPageChange}
-            pageCount={@state.pageCount} />
-        </div>}
-    </div>
+            <Paginator
+              page={+@props.query.page}
+              onPageChange={@onPageChange}
+              pageCount={subjects[0].getMeta().page_count} />
+          </div>}
+      </div>
+
+    <PromiseRenderer
+      promise={@fetchCollectionSubjects()}
+      pending={pendingFunc}
+      catch={catchFunc}
+      then={thenFunc} />

    query = Object.assign defaultQuery, query
    @props.collection.get 'subjects', query
      .then (subjects) =>
        newState =
          subjects: subjects
          pageCount: subjects[0]?.getMeta().page_count || 0
        @setState newState
      .catch =>
        @setState errorThrown: true
      .then =>
        @setState isLoading: false

  onPageChange: (page) ->
    nextQuery = Object.assign @props.query, { page }

talkClient = require '../api/talk'
apiClient = require '../api/client'
Paginator = require '../talk/lib/paginator'
PromiseRenderer = require '../components/promise-renderer'
SubjectViewer = require '../components/subject-viewer'
Loading = require '../components/loading-indicator'

