CardSwiperCodeSplit

Author: JohnThomson

src/components/BookCardGroup.tsx

@@ -17,7 +17,7 @@ import {
 } from "../connection/LibraryQueryHooks";
 import { BookCard, useBookCardSpec } from "./BookCard";
 import { MoreCard } from "./MoreCard";
-import { CardSwiperLazy } from "./CardSwiper";
+import { CardSwiperCodeSplit } from "./CardSwiperCodeSplit";
 import { ICollection } from "../model/ContentInterfaces";
 import Typography from "@material-ui/core/Typography";
 import { getLocalizedCollectionLabel } from "../localization/CollectionLabel";
@@ -157,7 +157,7 @@ const BookCardGroupInner: React.FunctionComponent<IProps> = (props) => {
             data.push("more");
         }
         bookList = (
-            <CardSwiperLazy
+            <CardSwiperCodeSplit
                 data={data}
                 cardSpec={cardSpec}
                 getReactElement={(item: IBasicBookInfo | "more", index) => {
@@ -180,7 +180,7 @@ const BookCardGroupInner: React.FunctionComponent<IProps> = (props) => {
                         );
                     }
                 }}
-            ></CardSwiperLazy>
+            ></CardSwiperCodeSplit>
         );
     } else {
         const verticalSpacing = cardSpec.cardSpacingPx;

src/components/BookGroup.tsx

@@ -17,7 +17,7 @@ import {
 import { BookCard, useBookCardSpec } from "./BookCard";
 import { useResponsiveChoice } from "../responsiveUtilities";
 import { BookOrderingScheme } from "../model/ContentInterfaces";
-import { CardSwiperLazy } from "./CardSwiper";
+import { CardSwiperCodeSplit } from "./CardSwiperCodeSplit";
 
 interface IProps {
     title: string;
@@ -184,14 +184,14 @@ export const BookGroupInner: React.FunctionComponent<IProps> = (props) => {
     // not to try to fix it.
     const cardSpec = useBookCardSpec();
     const bookList = showInOneRow ? (
-        <CardSwiperLazy
+        <CardSwiperCodeSplit
             data={cards}
             getReactElement={(x) => x}
             wrapperRole="list"
             cardSpec={cardSpec}
         >
             {cards}
-        </CardSwiperLazy>
+        </CardSwiperCodeSplit>
     ) : (
         <div
             css={css`

src/components/CardRow.tsx

@@ -5,7 +5,7 @@ import { jsx } from "@emotion/core";
 /** @jsx jsx */
 import React, { ReactElement } from "react";
 import LazyLoad from "react-lazyload";
-import { CardSwiperLazy } from "./CardSwiper";
+import { CardSwiperCodeSplit } from "./CardSwiperCodeSplit";
 import { ICollection } from "../model/ContentInterfaces";
 import {
     CollectionLabel,
@@ -39,7 +39,7 @@ export const CardRow: React.FunctionComponent<IProps> = (props) => {
                 padding-left: 0;
             `}
         >
-            <CardSwiperLazy
+            <CardSwiperCodeSplit
                 wrapperRole="list"
                 data={props.data}
                 getReactElement={props.getCards}

src/components/CardSwiper.tsx

@@ -13,10 +13,11 @@ import "swiper/components/a11y/a11y.min.css";
 import { useResponsiveChoice } from "../responsiveUtilities";
 import { ICardSpec } from "./CardGroup";
 import { commonUI } from "../theme";
+import { ICardSwiperProps } from "./CardSwiperCodeSplit";
 
 SwiperCore.use([Navigation, A11y]);
 
-export const swiperConfig: Swiper = {
+const swiperConfig: Swiper = {
     preloadImages: false,
     lazy: {
         loadPrevNext: true,
@@ -48,22 +49,7 @@ export const swiperConfig: Swiper = {
 // small windows.
 // Enhance: this could be made generic, with a type param indicating that the type of objects in data
 // is the same as the type passed as the first argument of getReactElement
-export const CardSwiperLazy: React.FunctionComponent<{
-    data: any[];
-    // Given one of the items in data (and its index), return the react element that should be
-    // shown for that card when it is visible.
-    getReactElement: (card: any, index: number) => ReactElement;
-
-    // Typically the swiper is a list. I can't find a way to configure it so that the element containing
-    // the cards is a UL, but by setting this to 'list' and making items with role listitem we achieve
-    // the same accessibility goals. This role becomes the value of the role attribute of the swiper
-    // wrapper element, which is the immediate parent of the items. Note that it's not always a list, e.g.,
-    // in the LanguageGroup a further-out element is a listbox and the items have role 'option'.
-    // If you set a wrapperRole, make sure the children you pass have role listitem.
-    wrapperRole?: string;
-
-    cardSpec: ICardSpec;
-}> = (props) => {
+const CardSwiperLazy: React.FunctionComponent<ICardSwiperProps> = (props) => {
     const [swiper, setSwiper] = useState<any | null>(null);
     const getResponsiveChoice = useResponsiveChoice();
     const [showAll, setShowAll] = useState(false);
@@ -212,3 +198,5 @@ export const CardSwiperLazy: React.FunctionComponent<{
         </Swiper>
     );
 };
+
+export default CardSwiperLazy;

src/components/CardSwiperCodeSplit.tsx

@@ -0,0 +1,34 @@
+import React, { ReactElement } from "react";
+import { ICardSpec } from "./CardGroup";
+
+export interface ICardSwiperProps {
+    data: any[];
+    // Given one of the items in data (and its index), return the react element that should be
+    // shown for that card when it is visible.
+    getReactElement: (card: any, index: number) => ReactElement;
+
+    // Typically the swiper is a list. I can't find a way to configure it so that the element containing
+    // the cards is a UL, but by setting this to 'list' and making items with role listitem we achieve
+    // the same accessibility goals. This role becomes the value of the role attribute of the swiper
+    // wrapper element, which is the immediate parent of the items. Note that it's not always a list, e.g.,
+    // in the LanguageGroup a further-out element is a listbox and the items have role 'option'.
+    // If you set a wrapperRole, make sure the children you pass have role listitem.
+    wrapperRole?: string;
+
+    cardSpec: ICardSpec;
+}
+
+// This is wrapped so that we can keep all the javascript involved in the CardSwiper
+// in a separate js file, downloaded to the user's browser only if he/she needs it.
+export const CardSwiperCodeSplit: React.FunctionComponent<ICardSwiperProps> = (
+    props
+) => {
+    const CardSwiperLazy = React.lazy(
+        () => import(/* webpackChunkName: "cardSwiper" */ "./CardSwiper")
+    );
+    return (
+        <React.Suspense fallback={<div>Loading Cards...</div>}>
+            <CardSwiperLazy {...props} />
+        </React.Suspense>
+    );
+};

src/components/LanguageGroup.tsx

@@ -18,7 +18,7 @@ import matchSorter from "match-sorter";
 import searchIcon from "../search.png";
 import { CachedTablesContext } from "../model/CacheProvider";
 import { ILanguage } from "../model/Language";
-import { CardSwiperLazy } from "./CardSwiper";
+import { CardSwiperCodeSplit } from "./CardSwiperCodeSplit";
 import { Redirect } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
 import { propsToHideAccessibilityElement } from "../Utilities";
@@ -54,7 +54,7 @@ export const LanguageGroup: React.FunctionComponent = () => {
         if (languagesToDisplay.length) {
             return (
                 <div {...getMenuProps({})}>
-                    <CardSwiperLazy
+                    <CardSwiperCodeSplit
                         data={languagesToDisplay}
                         cardSpec={cardSpec}
                         getReactElement={(l: ILanguage, index: number) => (