From b741a1ced86ee334330ab8de431aea1502d776b9 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Sat, 21 May 2022 12:52:46 +0200
Subject: [PATCH] change(ui) - dashboard - templates loading

---
 .../DashboardMetricSelection.tsx              |  6 +++--
 .../DashboardModal/DashboardModal.tsx         | 27 ++++++++++---------
 frontend/app/mstore/dashboardStore.ts         |  6 ++++-
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
index 400654df2..dc532c679 100644
--- a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
@@ -3,6 +3,7 @@ import WidgetWrapper from '../WidgetWrapper';
 import { useObserver } from 'mobx-react-lite';
 import cn from 'classnames';
 import { useStore } from 'App/mstore';
+import { Loader } from 'UI';
 
 function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }) {
     const selectedCategoryWidgetsCount = useObserver(() => {
@@ -27,6 +28,7 @@ function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }
 function DashboardMetricSelection(props) {
     const { dashboardStore } = useStore();
     let widgetCategories: any[] = useObserver(() => dashboardStore.widgetCategories);
+    const loadingTemplates = useObserver(() => dashboardStore.loadingTemplates);
     const [activeCategory, setActiveCategory] = React.useState<any>();
     const [selectAllCheck, setSelectAllCheck] = React.useState(false);
     const selectedWidgetIds = useObserver(() => dashboardStore.selectedWidgets.map((widget: any) => widget.metricId));
@@ -53,7 +55,7 @@ function DashboardMetricSelection(props) {
     }
 
     return useObserver(() => (
-        <div >
+        <Loader loading={loadingTemplates}>
             <div className="grid grid-cols-12 gap-4 my-3 items-end">
                 <div className="col-span-3">
                     <div className="uppercase color-gray-medium text-lg">Categories</div>
@@ -110,7 +112,7 @@ function DashboardMetricSelection(props) {
                     </div>
                 </div>
             </div>
-        </div>
+        </Loader>
     ));
 }
 
diff --git a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
index 027d6b631..1335db817 100644
--- a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
@@ -18,6 +18,7 @@ function DashboardModal(props) {
     const { dashboardStore } = useStore();
     const selectedWidgetsCount = useObserver(() => dashboardStore.selectedWidgets.length);
     const { hideModal } = useModal();
+    const loadingTemplates = useObserver(() => dashboardStore.loadingTemplates);
     const dashboard = useObserver(() => dashboardStore.dashboardInstance);
     const loading = useObserver(() => dashboardStore.isSaving);
 
@@ -61,18 +62,20 @@ function DashboardModal(props) {
                 </>
             )}
             <DashboardMetricSelection />
-
-            <div className="flex items-center absolute bottom-0 left-0 right-0 bg-white border-t p-3">
-                <Button
-                    primary
-                    className=""
-                    disabled={!dashboard.isValid || loading}
-                    onClick={onSave}
-                >
-                    { dashboard.exists() ? "Add Selected to Dashboard" : "Create" }
-                </Button>
-                <span className="ml-2 color-gray-medium">{selectedWidgetsCount} Widgets</span>
-            </div>
+            
+            {!loadingTemplates && (
+                <div className="flex items-center absolute bottom-0 left-0 right-0 bg-white border-t p-3">
+                    <Button
+                        primary
+                        className=""
+                        disabled={!dashboard.isValid || loading}
+                        onClick={onSave}
+                    >
+                        { dashboard.exists() ? "Add Selected to Dashboard" : "Create" }
+                    </Button>
+                    <span className="ml-2 color-gray-medium">{selectedWidgetsCount} Widgets</span>
+                </div>
+            )}
         </div>
     ));
 }
diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts
index e19757ee6..6c137519a 100644
--- a/frontend/app/mstore/dashboardStore.ts
+++ b/frontend/app/mstore/dashboardStore.ts
@@ -25,6 +25,7 @@ export interface IDashboardSotre {
     metricsPageSize: number
     metricsSearch: string
     
+    loadingTemplates: boolean
     isLoading: boolean
     isSaving: boolean
     isDeleting: boolean
@@ -92,9 +93,9 @@ export default class DashboardStore implements IDashboardSotre {
     isLoading: boolean = true
     isSaving: boolean = false
     isDeleting: boolean = false
+    loadingTemplates: boolean = false
     fetchingDashboard: boolean = false
     sessionsLoading: boolean = false;
-
     showAlertModal: boolean = false;
 
     constructor() {
@@ -354,6 +355,7 @@ export default class DashboardStore implements IDashboardSotre {
     }
 
     fetchTemplates(): Promise<any> {
+        this.loadingTemplates = true
         return new Promise((resolve, reject) => {
             metricService.getTemplates().then(response => {
                 const categories: any[] = []
@@ -373,6 +375,8 @@ export default class DashboardStore implements IDashboardSotre {
                 resolve(this.widgetCategories)
             }).catch(error => {
                 reject(error)
+            }).finally(() => {
+                this.loadingTemplates = false
             })
         })
     }