feat: Add loading overlay to DayMenuDetailsPage and MenuDetailsPage

bocabitlabs · Jul 7, 2024 · 6317791 · 6317791
1 parent a74fe16
commit 6317791
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/client/src/pages/menus/DayMenuDetailsPage/DayMenuDetailsPage.tsx b/client/src/pages/menus/DayMenuDetailsPage/DayMenuDetailsPage.tsx
@@ -1,7 +1,13 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
-import { Anchor, Breadcrumbs, Grid, Title } from "@mantine/core";
+import {
+  Anchor,
+  Breadcrumbs,
+  Grid,
+  LoadingOverlay,
+  Title,
+} from "@mantine/core";
 import { Footer } from "components/Footer/Footer";
 import PageTitle from "components/PageTitle/PageTitle";
 import RecipeDetails from "components/RecipeDetails/RecipeDetails";
@@ -12,7 +18,7 @@ import { IDailyMenu } from "types/weekly-menus";
 export default function DayMenuDetailsPage() {
   const { menuId, dayName } = useParams();
   const menuIdNumber = menuId ? parseInt(menuId, 10) : undefined;
-  const { data, isFetching } = useWeeklyMenu(menuIdNumber);
+  const { data, isLoading } = useWeeklyMenu(menuIdNumber);
   const { t } = useTranslation();
 
   const [dayMenu, setDayMenu] = useState<IDailyMenu | null>(null);
@@ -61,10 +67,13 @@ export default function DayMenuDetailsPage() {
     }
   }, [data, dayName]);
 
-  if (isFetching) return <div>Cargando...</div>;
-
   return (
     <Grid columns={24}>
+      <LoadingOverlay
+        visible={isLoading}
+        zIndex={1000}
+        overlayProps={{ radius: "sm", blur: 2 }}
+      />
       <Grid.Col span={24}>
         <Breadcrumbs>{items}</Breadcrumbs>
         <PageTitle

diff --git a/client/src/pages/menus/MenuDetailsPage/MenuDetailsPage.tsx b/client/src/pages/menus/MenuDetailsPage/MenuDetailsPage.tsx
@@ -1,6 +1,12 @@
 import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
-import { Anchor, Breadcrumbs, Grid, Stack } from "@mantine/core";
+import {
+  Anchor,
+  Breadcrumbs,
+  Grid,
+  LoadingOverlay,
+  Stack,
+} from "@mantine/core";
 import { DayCard } from "./components/DayCard/DayCard";
 import { Footer } from "components/Footer/Footer";
 import PageTitle from "components/PageTitle/PageTitle";
@@ -22,13 +28,16 @@ export default function MenuDetailsPage() {
     </Anchor>
   ));
 
-  if (isLoading) return <div>{t("Cargando...")}</div>;
-
   if (error) return <div>{t("Error")}</div>;
 
   if (data) {
     return (
       <Grid>
+        <LoadingOverlay
+          visible={isLoading}
+          zIndex={1000}
+          overlayProps={{ radius: "sm", blur: 2 }}
+        />
         <Grid.Col>
           <Breadcrumbs>{items}</Breadcrumbs>
           <PageTitle

diff --git a/client/src/pages/recipes/RecipeDetailsPage/RecipeDetailsPage.tsx b/client/src/pages/recipes/RecipeDetailsPage/RecipeDetailsPage.tsx
@@ -1,15 +1,15 @@
 /* eslint-disable react/no-danger */
 import React from "react";
 import { Link, useParams } from "react-router-dom";
-import { Anchor, Breadcrumbs, Grid } from "@mantine/core";
+import { Anchor, Breadcrumbs, Grid, LoadingOverlay } from "@mantine/core";
 import { Footer } from "components/Footer/Footer";
 import PageTitle from "components/PageTitle/PageTitle";
 import RecipeDetails from "components/RecipeDetails/RecipeDetails";
 import { useRecipe } from "hooks/recipes/use-recipes";
 
 export default function RecipeDetailsPage() {
   const { recipeId } = useParams();
-  const { data, isFetching } = useRecipe(recipeId ? +recipeId : undefined);
+  const { data, isLoading } = useRecipe(recipeId ? +recipeId : undefined);
 
   const items = [
     { title: "Inicio", href: "../.." },
@@ -22,19 +22,21 @@ export default function RecipeDetailsPage() {
     </Anchor>
   ));
 
-  if (isFetching) return <div>Cargando...</div>;
-
   if (data) {
     return (
       <Grid columns={24}>
+        <LoadingOverlay
+          visible={isLoading}
+          zIndex={1000}
+          overlayProps={{ radius: "sm", blur: 2 }}
+        />
         <Grid.Col span={24}>
           <Breadcrumbs>{items}</Breadcrumbs>
           <PageTitle
             header={`${data ? data.name : "cargando..."}`}
             withBackButton
           />
         </Grid.Col>
-        {isFetching && <div>Cargando receta...</div>}
         {data && <RecipeDetails recipe={data} />}
         <Grid.Col span={24}>
           <Footer />