change(ui) - dashboard - templates loading

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>
     ));
 }
 

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>
     ));
 }

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
             })
         })
     }