[FE](fix): no data for each widget

src/containers/datasets/alerts/hooks.tsx

@@ -163,8 +163,11 @@ export function useAlerts<T>(
     ...queryOptions,
   });
 
-  const { data } = query;
+  const { data, isFetched } = query;
+
   const fullData = getData(data);
+  const noData = isFetched && !fullData?.length;
+
   const startDateOptions = fullData.map((d) => d.startDate);
   const endDateOptions = fullData.map((d) => d.endDate);
 
@@ -422,6 +425,7 @@ export function useAlerts<T>(
       chartData,
       defaultStartDate,
       defaultEndDate,
+      noData,
     };
   }, [query, startDate, endDate, data, startIndex, endIndex, selectedStartDate, selectedEndDate]);
 }

src/containers/datasets/alerts/widget.tsx

@@ -7,6 +7,8 @@ import { alertsStartDate, alertsEndDate } from 'store/widgets/alerts';
 
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import NoData from 'containers/widgets/no-data';
+
 import Chart from 'components/chart';
 import Icon from 'components/icon';
 import Loading from 'components/loading';
@@ -47,9 +49,11 @@ const AlertsWidget = () => {
     fullData,
     defaultStartDate,
     defaultEndDate,
+    noData,
   } = useAlerts(startDate, endDate);
 
-  if (!fullData.length) return null;
+  if (noData) return <NoData />;
+
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>
       <Loading

src/containers/datasets/biomass/widget.tsx

@@ -6,6 +6,8 @@ import { BiomassYearSettings } from 'store/widgets/biomass';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import NoData from 'containers/widgets/no-data';
+
 import Loading from 'components/loading';
 import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets';
 
@@ -40,7 +42,8 @@ const BiomassWidget = () => {
 
   const { legend } = config;
 
-  if (noData) return null;
+  if (noData) return <NoData />;
+
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>
       <div className="flex flex-col items-center space-y-4">

src/containers/datasets/blue-carbon/widget.tsx

@@ -5,6 +5,8 @@ import { analysisAtom } from 'store/analysis';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRecoilValue } from 'recoil';
 
+import NoData from 'containers/widgets/no-data';
+
 import Loading from 'components/loading';
 import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets';
 
@@ -39,7 +41,7 @@ const BlueCarbonWidget = () => {
 
   const { location, agb, toc, soc, config, noData } = data;
 
-  if (noData) return null;
+  if (noData) return <NoData />;
 
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>

src/containers/datasets/carbon-market-potential/widget.tsx

@@ -2,6 +2,8 @@ import { useState } from 'react';
 
 import cn from 'lib/classnames';
 
+import NoData from 'containers/widgets/no-data';
+
 import Icon from 'components/icon';
 import Loading from 'components/loading';
 import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
@@ -32,7 +34,7 @@ const CarbonMarketPotentialWidget = () => {
 
   const { noData, location, units, labels, config, investibleBlueCarbonValue } = data;
 
-  if (noData) return null;
+  if (noData) return <NoData />;
 
   const { legend } = config;
 

src/containers/datasets/drivers-change/hooks.tsx

@@ -60,7 +60,7 @@ export function useMangroveDriversChange(
   });
 
   const { data, isLoading, isFetched, isPlaceholderData } = query;
-  const noData = !data?.data?.length;
+  const noData = isFetched && !data?.data?.length;
 
   return useMemo(() => {
     const colorKeys = getColorKeys(data?.data);

src/containers/datasets/drivers-change/widget.tsx

@@ -1,6 +1,7 @@
 import DriversChangeChart from 'containers/datasets/drivers-change/chart';
 import { primaryDrivers } from 'containers/datasets/drivers-change/constants';
 import { useMangroveDriversChange } from 'containers/datasets/drivers-change/hooks';
+import NoData from 'containers/widgets/no-data';
 
 import Loading from 'components/loading';
 import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets';
@@ -11,7 +12,7 @@ const DriversChangeWidget = () => {
 
   const { legend } = config;
 
-  if (noData) return null;
+  if (noData) return <NoData />;
 
   return (
     primaryDriver && (

src/containers/datasets/emissions-mitigation/hooks.tsx

@@ -142,8 +142,8 @@ export function useMangroveEmissionsMitigation(
     ...queryOptions,
   });
 
-  const { data } = query;
-  const noData = !data?.data?.length;
+  const { data, isFetched } = query;
+  const noData = isFetched && !data?.data?.length;
   const DATA = useMemo(() => {
     const COLOR_RAMP = chroma
       .scale(['#79D09A', '#3EA3A1', '#FBD07E', '#FF98B1', '#C57CF2', '#74C5FF', '#7287F9'])

src/containers/datasets/emissions-mitigation/widget.tsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 
+import NoData from 'containers/widgets/no-data';
+
 import Chart from 'components/chart';
 import Loading from 'components/loading';
 import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets';
@@ -25,7 +27,7 @@ const EmissionsMitigationWidget = () => {
   const { config, location, noData } = data;
   const { legend, ...restConfig } = config;
 
-  if (noData) return null;
+  if (noData) return <NoData />;
 
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>

src/containers/datasets/fisheries/widget.tsx

@@ -1,3 +1,5 @@
+import NoData from 'containers/widgets/no-data';
+
 import Loading from 'components/loading';
 import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets';
 
@@ -6,7 +8,7 @@ import { useMangroveFisheries } from './hooks';
 const Fisheries = () => {
   const { data, isFetched, isFetching } = useMangroveFisheries();
 
-  if (!data?.config?.data?.length) return null;
+  if (isFetched && !data?.config?.data?.length) return <NoData />;
 
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>

src/containers/datasets/flood-protection/widget.tsx

@@ -11,6 +11,7 @@ import type {
   FloodProtectionPeriodId,
   FloodProtectionIndicatorId,
 } from 'containers/datasets/flood-protection/types';
+import NoData from 'containers/widgets/no-data';
 
 import Icon from 'components/icon';
 import Loading from 'components/loading';
@@ -75,7 +76,7 @@ const FloodProtection = ({
     }
   }, [ref, ref.current]);
 
-  if (!data || isEmpty(data)) return null;
+  if (!data && isEmpty(data)) return null;
 
   const { periods, max, selectedValue, location, getFormattedValue } = data;
 

src/containers/datasets/habitat-change/hooks.tsx

@@ -62,8 +62,8 @@ export function useMangroveHabitatChange(
     ...queryOptions,
   });
 
-  const { data } = query;
-  const noData = !data?.data?.length;
+  const { data, isFetched } = query;
+  const noData = isFetched && !data?.data?.length;
 
   return useMemo(() => {
     const years = data?.metadata?.years;

src/containers/datasets/habitat-change/widget.tsx

@@ -6,6 +6,8 @@ import { habitatChangeStartYear, habitatChangeEndYear } from 'store/widgets/habi
 
 import { useRecoilState } from 'recoil';
 
+import NoData from 'containers/widgets/no-data';
+
 import Chart from 'components/chart';
 import Icon from 'components/icon';
 import Loading from 'components/loading';
@@ -46,7 +48,9 @@ const HabitatExtent = () => {
     useMangroveHabitatChange({ startYear, endYear, limit });
 
   const isLoading = false;
-  if (noData) return null;
+
+  if (noData) return <NoData />;
+
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>
       <Loading

src/containers/datasets/habitat-extent/widget.tsx

@@ -8,6 +8,8 @@ import { habitatExtentSettings } from 'store/widgets/habitat-extent';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import NoData from 'containers/widgets/no-data';
+
 import Icon from 'components/icon';
 import Loading from 'components/loading';
 import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
@@ -73,7 +75,8 @@ const HabitatExtent = () => {
     },
     [setYear]
   );
-  if (noData) return null;
+
+  if (noData) return <NoData />;
 
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>

src/containers/datasets/height/widget.tsx

@@ -5,6 +5,8 @@ import { analysisAtom } from 'store/analysis';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRecoilValue } from 'recoil';
 
+import NoData from 'containers/widgets/no-data';
+
 import Loading from 'components/loading';
 import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets';
 
@@ -36,7 +38,7 @@ const HeightWidget = () => {
     setIsCanceled(false);
   }, [refetch]);
 
-  if (noData) return null;
+  if (noData) return <NoData />;
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>
       <div className="flex flex-col items-center space-y-4">

src/containers/datasets/international-status/frel-ipcc/index.tsx

@@ -1,3 +1,5 @@
+import NoData from 'containers/widgets/no-data';
+
 import Loading from 'components/loading';
 import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets';
 
@@ -16,7 +18,9 @@ const InternationalStatus = () => {
   } = useMangroveInternationalStatus();
 
   const apostrophe = location?.[location?.length - 1] === 's' ? "'" : "'s";
-  if (noData) return null;
+
+  if (noData) return <NoData />;
+
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>
       <Loading

src/containers/datasets/iucn-ecoregion/widget.tsx

@@ -1,3 +1,5 @@
+import NoData from 'containers/widgets/no-data';
+
 import { Dialog, DialogContent, DialogTrigger, DialogClose } from 'components/dialog';
 import Loading from 'components/loading';
 import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets';
@@ -8,7 +10,7 @@ import { useMangroveEcoregions } from './hooks';
 const IUCNEcoregions = () => {
   const { data, isLoading, isFetched } = useMangroveEcoregions();
 
-  if (!data) return null;
+  if (isFetched && !data) return <NoData />;
 
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>

src/containers/datasets/national-dashboard/widget.tsx

@@ -6,6 +6,8 @@ import cn from 'lib/classnames';
 
 import chroma from 'chroma-js';
 
+import NoData from 'containers/widgets/no-data';
+
 import Loading from 'components/loading';
 import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SUBTITLE_STYLE } from 'styles/widgets';
 
@@ -17,7 +19,9 @@ import OtherResources from './other-resources';
 const NationalDashboard = () => {
   const { data, isLoading, isFetching, isFetched } = useNationalDashboard();
   const [yearSelected, setYearSelected] = useState<number>(data?.data?.sources?.years?.[0] || null);
-  if (!data?.data.length) return null;
+
+  if (isFetched && !data?.data.length) return <NoData />;
+
   const sources = flatten(
     data?.data?.map(({ sources }) =>
       flatten(
@@ -34,6 +38,7 @@ const NationalDashboard = () => {
     .colors(sources.length > COLORS.length ? sources.length : COLORS.length);
   const years = data?.data?.[0]?.sources[0]?.years;
   const currentYear = yearSelected || years?.[years?.length - 1];
+
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>
       <Loading visible={isLoading && !isFetching} iconClassName="flex w-10 h-10 m-auto my-10" />

src/containers/datasets/net-change/widget.tsx

@@ -8,6 +8,8 @@ import { netChangeStartYear, netChangeEndYear } from 'store/widgets/net-change';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import NoData from 'containers/widgets/no-data';
+
 import Icon from 'components/icon';
 import Loading from 'components/loading';
 import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
@@ -72,7 +74,7 @@ const NetChangeWidget = () => {
     await refetch();
   }, [refetch]);
 
-  if (noData) return null;
+  if (noData) return <NoData />;
 
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>

src/containers/datasets/protection/widget.tsx

@@ -2,6 +2,8 @@ import { useState } from 'react';
 
 import cn from 'lib/classnames';
 
+import NoData from 'containers/widgets/no-data';
+
 import Icon from 'components/icon';
 import Loading from 'components/loading';
 import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
@@ -21,7 +23,7 @@ const Protection = () => {
   const [selectedUnit, setUnit] = useState('ha');
   const { data, isFetched, isFetching } = useMangroveProtectedAreas({ unit: selectedUnit });
 
-  if (!Object.keys(data || {}).length) return null;
+  if (isFetched && !Object.keys(data || {}).length) return <NoData />;
 
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>

src/containers/datasets/restoration-sites/widget.tsx

@@ -8,6 +8,8 @@ import { RestorationSitesMapFilters } from 'store/widgets/restoration-sites';
 
 import { useSetRecoilState } from 'recoil';
 
+import NoData from 'containers/widgets/no-data';
+
 import { Dialog, DialogContent, DialogClose, DialogTrigger } from 'components/dialog';
 import Loading from 'components/loading';
 import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SENTENCE_STYLE } from 'styles/widgets';
@@ -66,6 +68,8 @@ const RestorationSitesWidget = () => {
 
   if (!filtersData) return null;
 
+  if (isFetched && data?.data.length === 0) return <NoData />;
+
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>
       <Loading visible={isFetching} iconClassName="flex w-10 h-10 m-auto my-20" />

src/containers/datasets/restoration/fisheries/widget.tsx

@@ -25,6 +25,7 @@ const PotentialBenefitsToFisheries = () => {
   });
 
   if (!data?.length) return null;
+
   return (
     <div
       className={cn({

src/containers/datasets/species-distribution/hooks.tsx

@@ -51,9 +51,9 @@ export function useMangroveSpecies(
     ...queryOptions,
   });
 
-  const { data } = query;
+  const { data, isFetched } = query;
 
-  const noData = !data?.data?.total;
+  const noData = isFetched && !data?.data?.total;
 
   return useMemo(() => {
     const total = data?.data?.total;