Smoothly swap from Continue Listeing to Featured Teachings on page load

src/components/organisms/cardSlider/section/continueListening.tsx

@@ -5,14 +5,18 @@ import { CardRecordingFragment } from '~src/components/molecules/card/__generate
 import CardRecording from '~src/components/molecules/card/recording';
 
 import { useInfiniteGetSectionContinueListeningQuery } from './__generated__/continueListening';
-import FeaturedTeachings from './featuredTeachings';
 import Section from './index';
 
-export default function ContinueListening(): JSX.Element {
+export default function ContinueListening({
+	hidden,
+}: {
+	hidden: boolean;
+}): JSX.Element {
 	const intl = useIntl();
 
 	return (
 		<Section
+			hidden={hidden}
 			infiniteQuery={useInfiniteGetSectionContinueListeningQuery}
 			heading={intl.formatMessage({
 				id: 'discover_continueListeningHeading',
@@ -34,7 +38,6 @@ export default function ContinueListening(): JSX.Element {
 				<CardRecording recording={p.node} />
 			)}
 			showLoading
-			blankNode={<FeaturedTeachings />}
 		/>
 	);
 }

src/components/organisms/cardSlider/section/featuredTeachings.tsx

@@ -7,10 +7,15 @@ import CardRecording from '~src/components/molecules/card/recording';
 import { useInfiniteGetSectionFeaturedTeachingsQuery } from './__generated__/featuredTeachings';
 import Section from './index';
 
-export default function FeaturedTeachings(): JSX.Element {
+export default function FeaturedTeachings({
+	hidden,
+}: {
+	hidden: boolean;
+}): JSX.Element {
 	const intl = useIntl();
 	return (
 		<Section
+			hidden={hidden}
 			infiniteQuery={useInfiniteGetSectionFeaturedTeachingsQuery}
 			heading={intl.formatMessage({
 				id: 'discover_featuredTeachingsHeading',
@@ -27,6 +32,7 @@ export default function FeaturedTeachings(): JSX.Element {
 			Card={(p: { node: CardRecordingFragment }) => (
 				<CardRecording recording={p.node} />
 			)}
+			showLoading
 		/>
 	);
 }

src/components/organisms/cardSlider/section/index.module.scss

@@ -19,3 +19,8 @@
 		text-decoration: none;
 	}
 }
+
+.hidden {
+	height: 0px;
+	overflow: hidden;
+}

src/components/organisms/cardSlider/section/index.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { Maybe } from 'graphql/jsutils/Maybe';
 import React, { useCallback, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -48,7 +49,7 @@ type SectionProps<T, N> = {
 	>;
 	Card: Card<N>;
 	showLoading?: boolean;
-	blankNode?: JSX.Element;
+	hidden?: boolean;
 };
 
 function isSectionRoot<T>(v: unknown): v is SectionRoot<T> {
@@ -76,7 +77,7 @@ export default function Section<T extends GraphqlInfiniteQuery, N>({
 	Card,
 	seeAllUrl,
 	showLoading = false,
-	blankNode = <></>,
+	hidden = false,
 	...props
 }: SectionProps<T, N>): JSX.Element {
 	const language = useLanguageId();
@@ -122,7 +123,7 @@ export default function Section<T extends GraphqlInfiniteQuery, N>({
 
 	// Check if there's content to render, if not, return an empty JSX element
 	if (cards.length < 1 && !(isLoading && showLoading)) {
-		return blankNode;
+		return <></>;
 	}
 
 	const loadingCards: JSX.Element[] = [];
@@ -134,7 +135,7 @@ export default function Section<T extends GraphqlInfiniteQuery, N>({
 	}
 
 	return (
-		<div className={styles.section}>
+		<div className={clsx(styles.section, hidden ? styles.hidden : '')}>
 			<LineHeading variant="overline" unpadded>
 				<span>{heading}</span>
 				{seeAllUrl && (

src/containers/discover/index.tsx

@@ -17,11 +17,12 @@ import EgwAudiobooks from '~src/components/organisms/cardSlider/section/egwAudio
 import Presenters from '~src/components/organisms/cardSlider/section/presenters';
 
 export default function Discover(): JSX.Element {
-	const { isUserLoggedIn } = useIsAuthenticated();
+	const { isUserLoggedIn, isLoading } = useIsAuthenticated();
 
 	return (
 		<div>
-			{isUserLoggedIn ? <ContinueListening /> : <FeaturedTeachings />}
+			<ContinueListening hidden={!(isUserLoggedIn || isLoading)} />
+			<FeaturedTeachings hidden={isUserLoggedIn || isLoading} />
 			<RecentTeachings />
 			<Topics />
 			<Presenters