From 87107ff7836b711c2058679b772088fea7cadb71 Mon Sep 17 00:00:00 2001
From: Jacob Pihl <jacob@youtech.dk>
Date: Thu, 9 Nov 2023 15:55:56 +0100
Subject: [PATCH] Show skeleton loader when fetching materials

To make it visible to the user that we are fetching materials, we are showing a skeleton loader on the materials we are waiting to finish fetching
---
 .../materials/utils/material-fetch-hoc.tsx        |  9 +++++++--
 .../reservation-material/reservation-material.tsx | 15 ++++++++++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/apps/loan-list/materials/utils/material-fetch-hoc.tsx b/src/apps/loan-list/materials/utils/material-fetch-hoc.tsx
index a2cc270c69..94cc51119e 100644
--- a/src/apps/loan-list/materials/utils/material-fetch-hoc.tsx
+++ b/src/apps/loan-list/materials/utils/material-fetch-hoc.tsx
@@ -17,7 +17,8 @@ type InputProps = {
 
 const fetchMaterial =
   <P extends object>(
-    Component: ComponentType<P & MaterialProps>
+    Component: ComponentType<P & MaterialProps>,
+    FallbackComponent?: ComponentType
   ): FC<P & InputProps> =>
   ({ identifier, faust, ...props }: InputProps) => {
     // If this is a digital book, another HOC fetches the data and this
@@ -48,7 +49,11 @@ const fetchMaterial =
         }
       }, [isSuccessManifestation, data]);
 
-      if (!material) return null;
+      // in cases where the material is not found we return null, else we would load forever
+      if (data && data.manifestation === null) return null;
+
+      // if the fallback component is provided we can show it while the data is loading
+      if (!material) return FallbackComponent ? <FallbackComponent /> : null;
 
       return (
         <Component
diff --git a/src/apps/reservation-list/reservation-material/reservation-material.tsx b/src/apps/reservation-list/reservation-material/reservation-material.tsx
index a92aabaed2..e74ed266ab 100644
--- a/src/apps/reservation-list/reservation-material/reservation-material.tsx
+++ b/src/apps/reservation-list/reservation-material/reservation-material.tsx
@@ -6,6 +6,7 @@ import { ReservationType } from "../../../core/utils/types/reservation-type";
 import fetchDigitalMaterial from "../../loan-list/materials/utils/digital-material-fetch-hoc";
 import MaterialInfo from "../../loan-list/materials/stackable-material/material-info";
 import ReservationInfo from "./reservation-info";
+import CardListItemSkeleton from "../../../components/card-item-list/card-list-item/card-list-item-skeleton";
 
 export interface ReservationMaterialProps {
   reservation: ReservationType;
@@ -61,4 +62,16 @@ const ReservationMaterial: FC<ReservationMaterialProps & MaterialProps> = ({
   );
 };
 
-export default fetchDigitalMaterial(fetchMaterial(ReservationMaterial));
+const ReservationMaterialSkeleton: FC = () => {
+  return (
+    <li>
+      <div className="my-32">
+        <CardListItemSkeleton />
+      </div>
+    </li>
+  );
+};
+
+export default fetchDigitalMaterial(
+  fetchMaterial(ReservationMaterial, ReservationMaterialSkeleton)
+);