Add a skeleton loading page to the Favorite Page

danskernesdigitalebibliotek · Apr 4, 2024 · a703f67 · a703f67
1 parent 11987cd
commit a703f67
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 30 deletions.
diff --git a/src/apps/favorites-list/FavoritesList.tsx b/src/apps/favorites-list/FavoritesList.tsx
@@ -6,14 +6,15 @@ import { useText } from "../../core/utils/text";
 import { Pid } from "../../core/utils/types/ids";
 import CardListItemAdapter from "../../components/card-item-list/card-list-item/card-list-item-adapter";
 import MaterialListItem from "../../components/card-item-list/MaterialListItem";
+import CardListItemSkeleton from "../../components/card-item-list/card-list-item/card-list-item-skeleton";
 
 export interface FavoritesListProps {
   pageSize: number;
 }
 
 const FavoritesList: React.FC<FavoritesListProps> = ({ pageSize }) => {
   const t = useText();
-  const { data } = useGetList("default");
+  const { data, isLoading } = useGetList("default");
   const [displayedMaterials, setDisplayedMaterials] = useState<Pid[]>([]);
   const [materials, setMaterials] = useState<Pid[]>([]);
   const { itemsShown, PagerComponent, page } = usePager({
@@ -41,40 +42,68 @@ const FavoritesList: React.FC<FavoritesListProps> = ({ pageSize }) => {
     }
   }, [collections, data]);
 
+  const skeletonList = (
+    <>
+      <div className="ssc">
+        <div className="ssc-line w-10 my-32">&nbsp;</div>
+      </div>
+      <ul className="card-list-page__list my-32">
+        {/*
+          We'll show 5 skeleton cards which should cover most screens.
+        */}
+        {[...Array(5)].map(() => (
+          <li>
+            <CardListItemSkeleton />
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+
+  const materialsCount = materials.length > 0 && (
+    <p className="text-small-caption my-32">
+      {t("favoritesListMaterialsText", {
+        placeholders: { "@count": materials.length }
+      })}
+    </p>
+  );
+
+  const renderContent = () =>
+    displayedMaterials.length > 0 ? (
+      <ul className="card-list-page__list my-32">
+        {displayedMaterials.map((pid, i) => {
+          const isFirstNewItem = i === page * pageSize;
+          return (
+            <MaterialListItem
+              key={pid}
+              ref={isFirstNewItem ? lastItemRef : null}
+            >
+              <CardListItemAdapter pid={pid} />
+            </MaterialListItem>
+          );
+        })}
+      </ul>
+    ) : (
+      <EmptyList
+        classNames="mt-24"
+        emptyListText={t("favoritesListEmptyText")}
+      />
+    );
+
   return (
     <div className="card-list-page">
       <h1 className="text-header-h2 mb-16 search-result-title">
         {t("favoritesListHeaderText")}
       </h1>
-      {materials.length > 0 && (
-        <p className="text-small-caption my-32">
-          {t("favoritesListMaterialsText", {
-            placeholders: { "@count": materials.length }
-          })}
-        </p>
-      )}
-      {displayedMaterials.length > 0 && (
-        <ul className="card-list-page__list my-32">
-          {displayedMaterials.map((pid, i) => {
-            const isFirstNewItem = i === page * pageSize;
-            return (
-              <MaterialListItem
-                key={pid}
-                ref={isFirstNewItem ? lastItemRef : null}
-              >
-                <CardListItemAdapter key={pid} pid={pid} />
-              </MaterialListItem>
-            );
-          })}
-        </ul>
-      )}
-      {displayedMaterials.length === 0 && (
-        <EmptyList
-          classNames="mt-24"
-          emptyListText={t("favoritesListEmptyText")}
-        />
+      {isLoading ? (
+        skeletonList
+      ) : (
+        <>
+          {materialsCount}
+          {renderContent()}
+          <PagerComponent />
+        </>
       )}
-      <PagerComponent />
     </div>
   );
 };

diff --git a/src/components/card-item-list/card-list-item/card-list-item-adapter.tsx b/src/components/card-item-list/card-list-item/card-list-item-adapter.tsx
@@ -3,15 +3,19 @@ import { useGetSmallWorkQuery } from "../../../core/dbc-gateway/generated/graphq
 import { Work } from "../../../core/utils/types/entities";
 import CardListItem from "./card-list-item";
 import { Pid } from "../../../core/utils/types/ids";
+import CardListItemSkeleton from "./card-list-item-skeleton";
 
 export interface CardListItemAdapterProps {
   pid: Pid;
 }
 
 const CardListItemAdapter: FC<CardListItemAdapterProps> = ({ pid }) => {
-  const { data } = useGetSmallWorkQuery({
+  const { data, isLoading } = useGetSmallWorkQuery({
     id: pid
   });
+
+  if (isLoading) return <CardListItemSkeleton />;
+
   return (
     <div>
       {data && data.work && (