From cf9f6d88e673fdf7f84b6bd2982e30547c4e6105 Mon Sep 17 00:00:00 2001
From: cesarLima1 <cesmaulim@gmail.com>
Date: Wed, 20 Nov 2024 11:10:44 -0400
Subject: [PATCH] [TM-1499] show blur after data is completly loaded

---
 .../dashboard/components/ContentOverview.tsx  |  6 +++-
 .../dashboard/components/SecDashboard.tsx     | 17 +++++++----
 src/pages/dashboard/hooks/useDashboardData.ts | 28 +++++++++++--------
 src/pages/dashboard/index.page.tsx            | 10 +++++++
 4 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/pages/dashboard/components/ContentOverview.tsx b/src/pages/dashboard/components/ContentOverview.tsx
index 9f9595f06..d4da39e29 100644
--- a/src/pages/dashboard/components/ContentOverview.tsx
+++ b/src/pages/dashboard/components/ContentOverview.tsx
@@ -50,6 +50,7 @@ interface ContentOverviewProps<TData> {
   showImagesButton?: boolean;
   bbox?: BBox | undefined;
   isUserAllowed?: boolean;
+  isLoadingHectaresUnderRestoration?: boolean;
   projectCounts?: {
     total_enterprise_count: number;
     total_non_profit_count: number;
@@ -68,7 +69,8 @@ const ContentOverview = (props: ContentOverviewProps<RowData>) => {
     showImagesButton,
     bbox: initialBbox,
     projectCounts,
-    isUserAllowed = true
+    isUserAllowed = true,
+    isLoadingHectaresUnderRestoration = false
   } = props;
   const t = useT();
   const modalMapFunctions = useMap();
@@ -297,6 +299,7 @@ const ContentOverview = (props: ContentOverviewProps<RowData>) => {
             dataForChart={dataHectaresUnderRestoration.restorationStrategiesRepresented}
             tooltip={t(RESTORATION_STRATEGIES_REPRESENTED_TOOLTIP)}
             isUserAllowed={isUserAllowed}
+            isLoading={isLoadingHectaresUnderRestoration}
           />
           <SecDashboard
             title={t("Target Land Use Types Represented")}
@@ -304,6 +307,7 @@ const ContentOverview = (props: ContentOverviewProps<RowData>) => {
             data={dataHectaresUnderRestoration}
             tooltip={t(TARGET_LAND_USE_TYPES_REPRESENTED_TOOLTIP)}
             isUserAllowed={isUserAllowed}
+            isLoading={isLoadingHectaresUnderRestoration}
           />
         </PageCard>
 
diff --git a/src/pages/dashboard/components/SecDashboard.tsx b/src/pages/dashboard/components/SecDashboard.tsx
index cc863a945..c3938df42 100644
--- a/src/pages/dashboard/components/SecDashboard.tsx
+++ b/src/pages/dashboard/components/SecDashboard.tsx
@@ -49,7 +49,8 @@ const SecDashboard = ({
   data,
   dataForChart,
   chartType,
-  isUserAllowed
+  isUserAllowed = true,
+  isLoading = false
 }: {
   title: string;
   type?: "legend" | "toggle";
@@ -66,6 +67,7 @@ const SecDashboard = ({
   dataForChart?: any;
   chartType?: string;
   isUserAllowed?: boolean;
+  isLoading?: boolean;
 }) => {
   const router = useRouter();
   const [toggleValue, setToggleValue] = useState(0);
@@ -172,7 +174,7 @@ const SecDashboard = ({
         </When>
         <When condition={chartType === CHART_TYPES.multiLineChart}>
           <BlurContainer
-            isBlur={(isUserAllowed ?? false) && isEmptyChartData(chartType ?? "", treesPlantedByYear)}
+            isBlur={(isUserAllowed ?? false) && !isLoading && isEmptyChartData(chartType ?? "", treesPlantedByYear)}
             textInformation={noDataInformation}
             className="ml-[20px] lg:ml-[15px]"
           >
@@ -188,7 +190,9 @@ const SecDashboard = ({
         </When>
         <When condition={chartType === CHART_TYPES.groupedBarChart}>
           <BlurContainer
-            isBlur={(isUserAllowed ?? false) && isEmptyChartData(CHART_TYPES.groupedBarChart, dataForChart)}
+            isBlur={
+              (isUserAllowed ?? false) && !isLoading && isEmptyChartData(CHART_TYPES.groupedBarChart, dataForChart)
+            }
             textInformation={noDataInformation}
           >
             <GroupedBarChart
@@ -202,7 +206,7 @@ const SecDashboard = ({
         </When>
         <When condition={chartType === CHART_TYPES.doughnutChart}>
           <BlurContainer
-            isBlur={(isUserAllowed ?? false) && isEmptyChartData(CHART_TYPES.doughnutChart, dataForChart)}
+            isBlur={(isUserAllowed ?? false) && !isLoading && isEmptyChartData(CHART_TYPES.doughnutChart, dataForChart)}
             textInformation={noDataInformation}
           >
             <DoughnutChart
@@ -216,7 +220,9 @@ const SecDashboard = ({
         </When>
         <When condition={chartType === CHART_TYPES.simpleBarChart}>
           <BlurContainer
-            isBlur={(isUserAllowed ?? false) && isEmptyChartData(CHART_TYPES.simpleBarChart, dataForChart)}
+            isBlur={
+              (isUserAllowed ?? false) && !isLoading && isEmptyChartData(CHART_TYPES.simpleBarChart, dataForChart)
+            }
             textInformation={noDataInformation}
             className="ml-[40px] lg:ml-[35px]"
           >
@@ -281,6 +287,7 @@ const SecDashboard = ({
           <BlurContainer
             isBlur={
               (isUserAllowed ?? false) &&
+              !isLoading &&
               (data?.graphicTargetLandUseTypes === undefined || data?.graphicTargetLandUseTypes.length === 0)
             }
             textInformation={noDataInformation}
diff --git a/src/pages/dashboard/hooks/useDashboardData.ts b/src/pages/dashboard/hooks/useDashboardData.ts
index 75021c332..086daea09 100644
--- a/src/pages/dashboard/hooks/useDashboardData.ts
+++ b/src/pages/dashboard/hooks/useDashboardData.ts
@@ -32,17 +32,17 @@ export const useDashboardData = (filters: any) => {
   const [dashboardHeader, setDashboardHeader] = useState([
     {
       label: "Trees Planted",
-      value: "0",
+      value: "Loading...",
       tooltip: TREES_PLANTED_TOOLTIP
     },
     {
       label: "Hectares Under Restoration",
-      value: "0 ha",
+      value: "Loading...",
       tooltip: HECTARES_UNDER_RESTORATION_TOOLTIP
     },
     {
       label: "Jobs Created",
-      value: "0",
+      value: "Loading...",
       tooltip: JOBS_CREATED_TOOLTIP
     }
   ]);
@@ -93,7 +93,7 @@ export const useDashboardData = (filters: any) => {
     refetch: refetchTotalSectionHeader,
     isLoading
   } = useGetV2DashboardTotalSectionHeader<any>({ queryParams: queryParams }, { enabled: !!filters });
-  const { data: jobsCreatedData } = useGetV2DashboardJobsCreated<any>(
+  const { data: jobsCreatedData, isLoading: isLoadingJobsCreated } = useGetV2DashboardJobsCreated<any>(
     { queryParams: queryParams },
     { enabled: !!filters }
   );
@@ -127,18 +127,20 @@ export const useDashboardData = (filters: any) => {
     project?.name?.toLowerCase().includes(searchTerm?.toLowerCase())
   );
 
-  const { data: dashboardRestorationGoalData } =
+  const { data: dashboardRestorationGoalData, isLoading: isLoadingTreeRestorationGoal } =
     useGetV2DashboardTreeRestorationGoal<DashboardTreeRestorationGoalResponse>({
       queryParams: queryParams
     });
 
-  const { data: dashboardVolunteersSurvivalRate } = useGetV2DashboardVolunteersSurvivalRate<any>({
-    queryParams: queryParams
-  });
+  const { data: dashboardVolunteersSurvivalRate, isLoading: isLoadingVolunteers } =
+    useGetV2DashboardVolunteersSurvivalRate<any>({
+      queryParams: queryParams
+    });
 
-  const { data: hectaresUnderRestoration } = useGetV2DashboardIndicatorHectaresRestoration<any>({
-    queryParams: queryParams
-  });
+  const { data: hectaresUnderRestoration, isLoading: isLoadingHectaresUnderRestoration } =
+    useGetV2DashboardIndicatorHectaresRestoration<any>({
+      queryParams: queryParams
+    });
   const { data: dashboardProjectDetails } = useGetV2DashboardProjectDetailsProject<any>(
     { pathParams: { project: filters.uuid } },
     { enabled: !!filters.uuid }
@@ -210,6 +212,10 @@ export const useDashboardData = (filters: any) => {
     numberTreesPlanted,
     totalSectionHeader,
     hectaresUnderRestoration,
+    isLoadingJobsCreated,
+    isLoadingTreeRestorationGoal,
+    isLoadingVolunteers,
+    isLoadingHectaresUnderRestoration,
     dashboardProjectDetails,
     topProject,
     refetchTotalSectionHeader,
diff --git a/src/pages/dashboard/index.page.tsx b/src/pages/dashboard/index.page.tsx
index 2f1f91679..9fcba5644 100644
--- a/src/pages/dashboard/index.page.tsx
+++ b/src/pages/dashboard/index.page.tsx
@@ -68,6 +68,10 @@ const Dashboard = () => {
     totalSectionHeader,
     hectaresUnderRestoration,
     numberTreesPlanted,
+    isLoadingJobsCreated,
+    isLoadingHectaresUnderRestoration,
+    isLoadingTreeRestorationGoal,
+    isLoadingVolunteers,
     dashboardProjectDetails,
     topProject,
     refetchTotalSectionHeader,
@@ -383,6 +387,7 @@ const Dashboard = () => {
               chartType={CHART_TYPES.multiLineChart}
               tooltip={t(NUMBER_OF_TREES_PLANTED_BY_YEAR_TOOLTIP)}
               isUserAllowed={isUserAllowed?.allowed}
+              isLoading={isLoadingTreeRestorationGoal}
             />
             <When condition={!filters.uuid}>
               <SecDashboard
@@ -439,6 +444,7 @@ const Dashboard = () => {
                 classNameBody="w-full place-content-center !justify-center flex-col gap-5"
                 tooltip={t(JOBS_CREATED_BY_GENDER_TOOLTIP)}
                 isUserAllowed={isUserAllowed?.allowed}
+                isLoading={isLoadingJobsCreated}
               />
               <SecDashboard
                 title={t("Jobs Created by Age")}
@@ -449,6 +455,7 @@ const Dashboard = () => {
                 classNameBody="w-full place-content-center !justify-center flex-col gap-5"
                 tooltip={t(JOBS_CREATED_BY_AGE_TOOLTIP)}
                 isUserAllowed={isUserAllowed?.allowed}
+                isLoading={isLoadingJobsCreated}
               />
             </div>
             <SecDashboard
@@ -467,6 +474,7 @@ const Dashboard = () => {
                 classNameBody="w-full place-content-center !justify-center flex-col gap-5"
                 tooltip={t(VOLUNTEERS_CREATED_BY_GENDER_TOOLTIP)}
                 isUserAllowed={isUserAllowed?.allowed}
+                isLoading={isLoadingVolunteers}
               />
               <SecDashboard
                 title={t("Volunteers Created by Age")}
@@ -477,6 +485,7 @@ const Dashboard = () => {
                 classNameBody="w-full place-content-center !justify-center flex-col gap-5"
                 tooltip={t(VOLUNTEERS_CREATED_BY_AGE_TOOLTIP)}
                 isUserAllowed={isUserAllowed?.allowed}
+                isLoading={isLoadingVolunteers}
               />
             </div>
           </PageCard>
@@ -512,6 +521,7 @@ const Dashboard = () => {
             : NO_DATA_PRESENT_ACTIVE_PROJECT_TOOLTIPS
         )}
         isUserAllowed={isUserAllowed?.allowed}
+        isLoadingHectaresUnderRestoration={isLoadingHectaresUnderRestoration}
         polygonsData={polygonsData}
         bbox={filters.uuid ? projectBbox : countryBbox}
         projectCounts={projectCounts}