From cafc0e562850f2b2baa1d285f7437e2cc112854d Mon Sep 17 00:00:00 2001
From: Dave Richer <dave@imexsystems.ca>
Date: Thu, 15 Feb 2024 11:49:02 -0500
Subject: [PATCH] - Update GUI and provide loading state

Signed-off-by: Dave Richer <dave@imexsystems.ca>
---
 ...center-modal-filters-sorters-component.jsx | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/client/src/components/report-center-modal/report-center-modal-filters-sorters-component.jsx b/client/src/components/report-center-modal/report-center-modal-filters-sorters-component.jsx
index 98293a607..f544e63d6 100644
--- a/client/src/components/report-center-modal/report-center-modal-filters-sorters-component.jsx
+++ b/client/src/components/report-center-modal/report-center-modal-filters-sorters-component.jsx
@@ -1,9 +1,10 @@
-import {Button, Card, Col, Form, Input, InputNumber, Row, Select} from "antd";
+import {Button, Card, Checkbox, Col, Form, Input, InputNumber, Row, Select} from "antd";
 import React, {useEffect, useState} from "react";
 import {fetchFilterData} from "../../utils/RenderTemplate";
 import {DeleteFilled} from "@ant-design/icons";
 import {useTranslation} from "react-i18next";
 import {getOperatorsByType} from "../../utils/graphQLmodifier";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 
 export default function ReportCenterModalFiltersSortersComponent({form}) {
     return (
@@ -19,16 +20,19 @@ export default function ReportCenterModalFiltersSortersComponent({form}) {
 function RenderFilters({templateId, form}) {
     const [state, setState] = useState(null);
     const [visible, setVisible] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
     const {t} = useTranslation();
 
     useEffect(() => {
         const fetch = async () => {
+            setIsLoading(true);
             const data = await fetchFilterData({name: templateId});
             if (data?.success) {
                 setState(data.data);
             } else {
                 setState(null);
             }
+            setIsLoading(false);
         };
 
         if (templateId) {
@@ -37,11 +41,20 @@ function RenderFilters({templateId, form}) {
     }, [templateId]);
 
 
-    if (!templateId || !state) return null;
-    return (
-        <Card title={t('reportcenter.labels.advanced_filters')} style={{marginTop: '10px'}}>
-            <Button type='primary'  style={{width: '100%'}} onClick={() => setVisible(!visible)}>{visible ?  t('reportcenter.labels.advanced_filters_hide') : t('reportcenter.labels.advanced_filters_show')}</Button>
+    // Conditional display of filters and sorters
+    if (!templateId) return null;
+    if (isLoading) return <LoadingSkeleton/>;
+    if (!state) return null;
 
+    // Filters and Sorters data available
+    return (
+        <div style={{marginTop: '10px'}}>
+            <Checkbox
+                style={{width: '100%'}}
+                checked={visible}
+                onChange={(e) => setVisible(e.target.checked)}
+                children={t('reportcenter.labels.advanced_filters')}
+            />
             {visible && (
                 <div>
                     {state.filters && state.filters.length > 0 && (
@@ -256,6 +269,6 @@ function RenderFilters({templateId, form}) {
                     )}
                 </div>
             )}
-        </Card>
+        </div>
     );
 }
\ No newline at end of file