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

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

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)
+);