improved chart loading experience and modal mobile view implementation

airqo-platform · Nov 12, 2024 · 344cfaa · 344cfaa
1 parent 3b66749
commit 344cfaa
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 35 deletions.
diff --git a/platform/src/common/components/Charts/ChartContainer.jsx b/platform/src/common/components/Charts/ChartContainer.jsx
@@ -8,6 +8,7 @@ import MoreInsightsChart from './MoreInsightsChart';
 import SkeletonLoader from './components/SkeletonLoader';
 import { setOpenModal, setModalType } from '@/lib/store/services/downloadModal';
 import CustomToast from '../Toast/CustomToast';
+import useOutsideClick from '@/core/hooks/useOutsideClick';
 
 const ChartContainer = ({
   chartType,
@@ -38,17 +39,30 @@ const ChartContainer = ({
   const [loadingFormat, setLoadingFormat] = useState(null);
   const [downloadComplete, setDownloadComplete] = useState(null);
 
+  // State for managing the SkeletonLoader visibility
+  const [showSkeleton, setShowSkeleton] = useState(chartLoading);
+
   // Handle click outside for dropdown
+  useOutsideClick(dropdownRef, () => {
+    dropdownRef.current.classList.remove('show');
+    setDownloadComplete(null);
+  });
+
+  // Effect to manage SkeletonLoader visibility with delay
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setDownloadComplete(null);
-      }
-    };
+    let timer;
+    if (chartLoading) {
+      setShowSkeleton(true);
+    } else {
+      timer = setTimeout(() => {
+        setShowSkeleton(false);
+      }, 8000);
+    }
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [chartLoading]);
 
   /**
    * Exports the chart in the specified format.
@@ -212,10 +226,10 @@ const ChartContainer = ({
           </div>
         )}
         <div ref={chartRef} className="my-3 relative" style={{ width, height }}>
-          {chartLoading ? (
-            <SkeletonLoader width={width} height={height} />
-          ) : error ? (
+          {error ? (
             <ErrorOverlay />
+          ) : showSkeleton ? (
+            <SkeletonLoader width={width} height={height} />
           ) : (
             <MoreInsightsChart
               data={data}

diff --git a/platform/src/common/components/Modal/dataDownload/components/Footer.jsx b/platform/src/common/components/Modal/dataDownload/components/Footer.jsx
@@ -20,7 +20,7 @@ const Footer = ({
   }, [errorMessage, setError]);
 
   return (
-    <div className="bg-gray-50 absolute bottom-0 right-0 w-full px-4 py-3 sm:px-6 flex items-center justify-between">
+    <div className="bg-gray-50 absolute bottom-0 right-0 w-full px-4 py-3 sm:px-6 flex flex-col md:flex-row items-start md:items-center gap-2 justify-between">
       {/* Error message or selected locations info */}
       <div className="text-sm leading-5 font-normal">
         {errorMessage ? (
@@ -46,12 +46,12 @@ const Footer = ({
       </div>
 
       {/* Action buttons */}
-      <div className="sm:flex sm:flex-row-reverse gap-2">
+      <div className="flex sm:flex-row-reverse gap-2">
         <Button
           type="button"
           variant="filled"
           onClick={handleSubmit}
-          disabled={loading} // Disable button when loading
+          disabled={loading}
         >
           {loading ? (
             <div className="flex items-center gap-2">
@@ -66,7 +66,7 @@ const Footer = ({
           type="button"
           variant="outlined"
           onClick={onClose}
-          disabled={loading} // Disable cancel button when loading
+          disabled={loading}
         >
           Cancel
         </Button>

diff --git a/platform/src/common/components/Modal/dataDownload/index.jsx b/platform/src/common/components/Modal/dataDownload/index.jsx
@@ -81,7 +81,7 @@ const Modal = ({ isOpen, onClose }) => {
           leaveFrom="opacity-100 translate-y-0 sm:scale-100"
           leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
-          <div className="inline-bloc relative align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle lg:min-h-[658px] lg:min-w-[1020px] max-w-[1020px] h-auto ">
+          <div className="inline-bloc w-[380px] md:w-auto relative align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle lg:min-h-[658px] lg:min-w-[1020px] max-w-[1020px] h-auto ">
             {/* header */}
             <div className="flex items-center justify-between py-4 px-5 border-b border-[#E2E3E5]">
               {renderHeader()}
@@ -93,7 +93,9 @@ const Modal = ({ isOpen, onClose }) => {
               </div>
             </div>
             {/* body */}
-            <div className="flex relative flex-grow">{renderBody()}</div>
+            <div className="flex relative flex-col overflow-y-auto md:overflow-hidden md:flex-row w-full flex-grow">
+              {renderBody()}
+            </div>
           </div>
         </TransitionChild>
       </div>

diff --git a/platform/src/common/components/Modal/dataDownload/modules/AddLocations.jsx b/platform/src/common/components/Modal/dataDownload/modules/AddLocations.jsx
@@ -214,13 +214,13 @@ const AddLocations = ({ onClose }) => {
   return (
     <>
       {/* Selected Sites Sidebar */}
-      <div className="w-[280px] h-[658px] overflow-y-auto border-r relative space-y-3 px-4 pt-5 pb-14">
+      <div className="w-auto h-auto md:w-[280px] md:h-[658px] overflow-y-auto md:border-r relative space-y-3 px-4 pt-5 pb-14">
         {sidebarSitesContent}
       </div>
 
       {/* Main Content Area */}
       <div className="bg-white relative w-full h-auto">
-        <div className="px-8 pt-6 pb-4 overflow-y-auto">
+        <div className="px-2 md:px-8 pt-6 pb-4 overflow-y-auto">
           <DataTable
             data={sitesSummaryData}
             selectedSites={selectedSites}

diff --git a/platform/src/common/components/Modal/dataDownload/modules/DataDownload.jsx b/platform/src/common/components/Modal/dataDownload/modules/DataDownload.jsx
@@ -157,7 +157,7 @@ const DataDownload = ({ onClose }) => {
             ? 'calibrated'
             : 'raw',
         pollutants: [formData.pollutant.name.toLowerCase().replace('.', '_')],
-        resolution: formData.frequency.name.toLowerCase(),
+        frequency: formData.frequency.name.toLowerCase(),
         downloadType: formData.fileType.name.toLowerCase(),
         outputFormat: 'airqo-standard',
         minimum: true,
@@ -271,7 +271,7 @@ const DataDownload = ({ onClose }) => {
     <>
       {/* Section 1: Form */}
       <form
-        className="w-[280px] h-[658px] relative bg-[#f6f6f7] space-y-3 px-5 pt-5 pb-14"
+        className="w-auto h-auto md:w-[280px] md:h-[658px] relative bg-[#f6f6f7] space-y-3 px-5 pt-5 pb-14"
         onSubmit={handleSubmit}
       >
         {/* Edit Button */}
@@ -343,7 +343,7 @@ const DataDownload = ({ onClose }) => {
 
       {/* Section 2: Data Table and Footer */}
       <div className="bg-white relative w-full h-auto">
-        <div className="px-8 pt-6 pb-4 overflow-y-auto">
+        <div className="px-2 md:px-8 pt-6 pb-4 overflow-y-auto">
           {/* Data Table */}
           <DataTable
             data={sitesSummaryData}

diff --git a/platform/src/common/components/Modal/dataDownload/modules/MoreInsights.jsx b/platform/src/common/components/Modal/dataDownload/modules/MoreInsights.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 // import DownloadIcon from '@/icons/Analytics/downloadIcon';
 import MoreInsightsChart from '@/components/Charts/MoreInsightsChart';
@@ -77,13 +77,34 @@ const MoreInsights = () => {
     organisationName: chartData.organisationName,
   });
 
+  // State for managing the SkeletonLoader visibility
+  const [showSkeleton, setShowSkeleton] = useState(chartLoading);
+
   /**
    * Handles refetching data when a parameter changes.
    */
   const handleParameterChange = useCallback(() => {
     refetch();
   }, [refetch]);
 
+  /**
+   * Effect to manage SkeletonLoader visibility with delay
+   */
+  useEffect(() => {
+    let timer;
+    if (chartLoading) {
+      setShowSkeleton(true);
+    } else {
+      timer = setTimeout(() => {
+        setShowSkeleton(false);
+      }, 8000);
+    }
+
+    return () => {
+      if (timer) clearTimeout(timer);
+    };
+  }, [chartLoading]);
+
   /**
    * Generates the content for the selected sites in the sidebar.
    * Displays selected sites or a message when no sites are selected.
@@ -126,7 +147,7 @@ const MoreInsights = () => {
   return (
     <>
       {/* -------------------- Sidebar for Selected Sites -------------------- */}
-      <div className="w-[280px] h-[658px] overflow-y-auto border-r relative space-y-3 px-4 pt-5 pb-14">
+      <div className="w-auto h-auto md:w-[280px] md:h-[658px] overflow-y-auto border-r relative space-y-3 px-4 pt-5 pb-14">
         {selectedSitesContent}
         {/* Add Location Button */}
         {/* {!chartLoading && (
@@ -141,7 +162,7 @@ const MoreInsights = () => {
 
       {/* -------------------- Main Content Area -------------------- */}
       <div className="bg-white relative w-full h-full">
-        <div className="px-8 pt-6 pb-4 space-y-4 relative h-full overflow-hidden">
+        <div className="px-2 md:px-8 pt-6 pb-4 space-y-4 relative h-full overflow-y-auto md:overflow-hidden">
           {/* -------------------- Controls: Dropdowns and Actions -------------------- */}
           <div className="w-full flex flex-wrap gap-2 justify-between">
             <div className="space-x-2 flex">
@@ -188,7 +209,7 @@ const MoreInsights = () => {
                     handleParameterChange();
                   }
                 }}
-                className="left-16 top-11"
+                className="-left-10 md:left-16 top-11"
                 dropdown
                 isLoading={chartLoading}
               />
@@ -236,20 +257,20 @@ const MoreInsights = () => {
 
           {/* -------------------- Chart Display -------------------- */}
           <div className="w-full h-auto border rounded-xl border-grey-150 p-2">
-            {chartLoading ? (
-              <SkeletonLoader width="100%" height={380} />
-            ) : error ? (
-              <div className="w-full flex items-center justify-center h-[380px]">
-                <p className="text-red-500 font-semibold">
+            {error ? (
+              <div className="w-full flex flex-col items-center justify-center h-[380px]">
+                <p className="text-red-500 font-semibold mb-2">
                   Something went wrong. Please try again.
                 </p>
                 <button
                   onClick={refetch}
-                  className="ml-4 text-red-500 font-semibold underline"
+                  className="mt-2 px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
                 >
-                  Try again
+                  Try Again
                 </button>
               </div>
+            ) : showSkeleton ? (
+              <SkeletonLoader width="100%" height={380} />
             ) : (
               <MoreInsightsChart
                 data={allSiteData}

diff --git a/platform/src/core/utils/useFetchAnalyticsData.jsx b/platform/src/core/utils/useFetchAnalyticsData.jsx
@@ -73,7 +73,6 @@ const useFetchAnalyticsData = ({
           setAllSiteData(response.data);
           setChartLoading(false);
         } else {
-          setAllSiteData([]);
           throw new Error(
             response.message || 'Failed to fetch analytics data.',
           );

diff --git a/platform/src/pages/analytics/_components/OverView.jsx b/platform/src/pages/analytics/_components/OverView.jsx
@@ -45,6 +45,8 @@ const OverView = () => {
     organisationName: chartData.organizationName,
   });
 
+  console.info(chartLoading);
+
   // Reset chart data range to default when the component is unmounted
   useEffect(() => {
     return () => {
@@ -108,7 +110,7 @@ const OverView = () => {
           label,
         }),
       );
-      refetch(); // Trigger data refetch when date range changes
+      refetch();
     },
     [dispatch, refetch],
   );