Add loader to podcast page

static/js/components/Loading.js

@@ -106,6 +106,53 @@ export const PostLoading = () => (
   </div>
 )
 
+export const PodcastEpisodeLoading = () =>
+  R.times(
+    i => (
+      <Card key={i}>
+        <ContentLoader
+          speed={contentLoaderSpeed}
+          style={{ width: "100%", height: "74px" }}
+          width={1000}
+          height={74}
+          preserveAspectRatio="none"
+        >
+          <rect x="0" y="0" rx="5" ry="5" width="60%" height="12" />
+          <rect x="0" y="25" rx="5" ry="5" width="30%" height="14" />
+          <rect x="0" y="55" rx="15" ry="15" width="140" height="18" />
+          <rect x="66%" y="0" rx="5" ry="5" width="34%" height={69} />
+        </ContentLoader>
+      </Card>
+    ),
+    6
+  )
+
+export const PodcastLoading = () => (
+  <Grid>
+    {R.times(
+      i => (
+        <Cell width={4} key={i}>
+          <Card className="borderless">
+            <ContentLoader
+              speed={contentLoaderSpeed}
+              style={{ width: "100%", height: "280px" }}
+              width={1000}
+              height={280}
+              preserveAspectRatio="none"
+            >
+              <rect x="0" y="0" rx="5" ry="5" width="100%" height={180} />
+              <rect x="30" y="190" rx="5" ry="5" width="20%" height="12" />
+              <rect x="30" y="210" rx="5" ry="5" width="80%" height="18" />
+              <rect x="30" y="260" rx="15" ry="15" width="30%" height="12" />
+            </ContentLoader>
+          </Card>
+        </Cell>
+      ),
+      9
+    )}
+  </Grid>
+)
+
 type CSLProps = {
   layout: string
 }

static/js/components/Loading_test.js

@@ -1,9 +1,15 @@
 // @flow
 import React from "react"
 import { assert } from "chai"
-import { mount } from "enzyme"
+import { shallow, mount } from "enzyme"
 
-import { withLoading, withSpinnerLoading, withPostLoading } from "./Loading"
+import {
+  withLoading,
+  withSpinnerLoading,
+  withPostLoading,
+  PodcastLoading,
+  PodcastEpisodeLoading
+} from "./Loading"
 import { NotFound, NotAuthorized } from "../components/ErrorPages"
 
 const GenericLoader = () => <div className="loading">loading...</div>
@@ -81,4 +87,16 @@ describe("Loading component", () => {
       assert.lengthOf(wrapper.find(".post-content-loader"), 5)
     })
   })
+
+  describe("podcasts", () => {
+    it("should show nine empty items for podcasts", () => {
+      const wrapper = shallow(<PodcastLoading />)
+      assert.equal(wrapper.find("Card.borderless").length, 9)
+    })
+
+    it("should show six empty items for podcast episodes", () => {
+      const wrapper = shallow(<PodcastEpisodeLoading />)
+      assert.equal(wrapper.find("Card").length, 6)
+    })
+  })
 })

static/js/pages/PodcastFrontpage.js

@@ -6,6 +6,7 @@ import { useSelector } from "react-redux"
 import PodcastEpisodeCard from "../components/PodcastEpisodeCard"
 import PodcastCard from "../components/PodcastCard"
 import { Cell, Grid } from "../components/Grid"
+import { PodcastLoading, PodcastEpisodeLoading } from "../components/Loading"
 
 import {
   podcastsRequest,
@@ -20,8 +21,6 @@ export default function PodcastFrontpage() {
     recentPodcastEpisodesRequest()
   )
 
-  const loaded = isFinishedPodcasts && isFinishedRecent
-
   const podcasts = useSelector(podcastsSelector)
   const recentEpisodes = useSelector(recentEpisodesSelector)
 
@@ -31,7 +30,7 @@ export default function PodcastFrontpage() {
         <div className="recent-header">
           <div className="title">RECENT EPISODES</div>
         </div>
-        {loaded ? (
+        {isFinishedRecent && isFinishedPodcasts ? (
           <>
             {recentEpisodes
               .slice(0, 6)
@@ -43,19 +42,23 @@ export default function PodcastFrontpage() {
                 />
               ))}
           </>
-        ) : null}
+        ) : (
+          <PodcastEpisodeLoading />
+        )}
       </div>
       <div className="all-podcasts">
         <h1>Podcasts Series</h1>
-        {loaded ? (
+        {isFinishedPodcasts ? (
           <Grid>
             {Object.values(podcasts).map((podcast: any) => (
               <Cell width={4} key={podcast.id}>
                 <PodcastCard podcast={podcast} />
               </Cell>
             ))}
           </Grid>
-        ) : null}
+        ) : (
+          <PodcastLoading />
+        )}
       </div>
     </div>
   )

static/js/pages/PodcastFrontpage_test.js

@@ -6,7 +6,12 @@ import PodcastFrontpage from "./PodcastFrontpage"
 
 import IntegrationTestHelper from "../util/integration_test_helper"
 
-import { genericQueryResponse, queryListResponse } from "../lib/test_utils"
+import {
+  genericQueryResponse,
+  isIf,
+  queryListResponse,
+  shouldIf
+} from "../lib/test_utils"
 import { podcastApiURL, recentPodcastApiURL } from "../lib/url"
 import { makePodcast, makePodcastEpisode } from "../factories/podcasts"
 
@@ -48,4 +53,47 @@ describe("PodcastFrontpage tests", () => {
       wrapper.find("PodcastCard").map(card => card.prop("podcast"))
     ).map(podcasts => assert.deepEqual(...podcasts))
   })
+
+  describe("loader", () => {
+    [
+      [true, true, true, true],
+      [true, false, true, true],
+      [false, true, false, true],
+      [false, false, false, false]
+    ].forEach(
+      ([
+        podcastLoading,
+        episodesLoading,
+        expectedPodcastSpinner,
+        expectedRecentEpisodesSpinner
+      ]) => {
+        it(`${shouldIf(
+          expectedPodcastSpinner
+        )} show a spinner for podcasts and ${shouldIf(
+          expectedRecentEpisodesSpinner
+        )} show a spinner for recent episodes, if podcasts ${isIf(
+          podcastLoading
+        )} loading and recent episodes ${isIf(
+          episodesLoading
+        )} loading`, async () => {
+          helper.isLoadingStub
+            .withArgs(podcastApiURL.toString())
+            .returns(podcastLoading)
+          helper.isLoadingStub
+            .withArgs(recentPodcastApiURL.toString())
+            .returns(episodesLoading)
+
+          const { wrapper } = await render()
+          assert.equal(
+            expectedRecentEpisodesSpinner,
+            wrapper.find("PodcastEpisodeLoading").exists()
+          )
+          assert.equal(
+            expectedPodcastSpinner,
+            wrapper.find("PodcastLoading").exists()
+          )
+        })
+      }
+    )
+  })
 })

static/js/util/integration_test_helper.js

@@ -96,6 +96,7 @@ export default class IntegrationTestHelper {
       status: 200
     }
     this.handleRequestStub = this.sandbox.stub().returns(defaultResponse)
+    this.isLoadingStub = this.sandbox.stub().returns(false)
     this.sandbox
       .stub(networkInterfaceFuncs, "makeRequest")
       .callsFake((url, method, options) => ({
@@ -107,7 +108,9 @@ export default class IntegrationTestHelper {
           const resText = (response && response.text) || undefined
           const resHeaders = (response && response.header) || undefined
 
-          callback(err, resStatus, resBody, resText, resHeaders)
+          if (!this.isLoadingStub(url, method, options)) {
+            callback(err, resStatus, resBody, resText, resHeaders)
+          }
         },
         abort: () => {}
       }))