UI: Fixed infinite load when select divided layout

ui-ngx/src/app/core/services/dashboard-utils.service.ts

@@ -59,6 +59,7 @@ import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { BackgroundType, colorBackground, isBackgroundSettings } from '@shared/models/widget-settings.models';
 import { MediaBreakpoints } from '@shared/models/constants';
 import { TranslateService } from '@ngx-translate/core';
+import { DashboardPageLayout } from '@home/components/dashboard-page/dashboard-page.models';
 
 @Injectable({
   providedIn: 'root'
@@ -1066,4 +1067,22 @@ export class DashboardUtilsService {
     const maxStr = isDefined(currentData?.maxWidth) ? `max ${currentData.maxWidth}px` : '';
     return minStr && maxStr ? `${minStr} - ${maxStr}` : `${minStr}${maxStr}`;
   }
+
+  updatedLayoutForBreakpoint(layout: DashboardPageLayout, breakpointId: BreakpointId) {
+    let selectBreakpointId: BreakpointId = 'default';
+    if (layout.layoutCtx.layoutData[breakpointId]) {
+      selectBreakpointId = breakpointId;
+    }
+    layout.layoutCtx.breakpoint = selectBreakpointId;
+    const layoutInfo = layout.layoutCtx.layoutData[selectBreakpointId];
+    if (layoutInfo.gridSettings) {
+      layout.layoutCtx.gridSettings = layoutInfo.gridSettings;
+    }
+    layout.layoutCtx.widgets.setWidgetIds(layoutInfo.widgetIds);
+    layout.layoutCtx.widgetLayouts = layoutInfo.widgetLayouts;
+    if (layout.show && layout.layoutCtx.ctrl) {
+      layout.layoutCtx.ctrl.reload();
+    }
+    layout.layoutCtx.ignoreLoading = true;
+  }
 }

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -450,7 +450,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
         }),
         skip(1)
       ).subscribe(() => {
-          this.layouts.main.layoutCtx.ctrl.updatedCurrentBreakpoint();
+          this.dashboardUtils.updatedLayoutForBreakpoint(this.layouts.main, this.dashboardCtx.breakpoint);
           this.updateLayoutSizes();
         }
       )
@@ -1129,7 +1129,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   private updateLayout(layout: DashboardPageLayout, layoutInfo: DashboardLayoutInfo) {
     layout.layoutCtx.layoutData = layoutInfo;
     layout.layoutCtx.layoutDataChanged.next();
-    layout.layoutCtx.ctrl?.updatedCurrentBreakpoint(this.isEdit ? layout.layoutCtx.breakpoint : null, layout.show);
+    this.dashboardUtils.updatedLayoutForBreakpoint(layout, this.isEdit ? layout.layoutCtx.breakpoint : this.dashboardCtx.breakpoint);
     this.updateLayoutSizes();
   }
 

ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts

@@ -332,25 +332,4 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo
     const pos = this.dashboard.getEventGridPosition($event);
     this.layoutCtx.dashboardCtrl.pasteWidgetReference($event, this.layoutCtx, pos);
   }
-
-  updatedCurrentBreakpoint(breakpointId?: BreakpointId, showLayout = true) {
-    if (!isNotEmptyStr(breakpointId)) {
-      breakpointId = this.dashboardCtx.breakpoint;
-    }
-    if (this.layoutCtx.layoutData[breakpointId]) {
-      this.layoutCtx.breakpoint = breakpointId;
-    } else {
-      this.layoutCtx.breakpoint = 'default';
-    }
-    const layoutInfo = this.layoutCtx.layoutData[this.layoutCtx.breakpoint];
-    if (layoutInfo.gridSettings) {
-      this.layoutCtx.gridSettings = layoutInfo.gridSettings;
-    }
-    this.layoutCtx.widgets.setWidgetIds(layoutInfo.widgetIds);
-    this.layoutCtx.widgetLayouts = layoutInfo.widgetLayouts;
-    if (showLayout && this.layoutCtx.ctrl) {
-      this.layoutCtx.ctrl.reload();
-    }
-    this.layoutCtx.ignoreLoading = true;
-  }
 }

ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts

@@ -21,7 +21,6 @@ export interface ILayoutController {
   selectWidget(widgetId: string, delay?: number);
   pasteWidget($event: MouseEvent);
   pasteWidgetReference($event: MouseEvent);
-  updatedCurrentBreakpoint(breakpoint?: string, showLayout?: boolean);
 }
 
 export enum LayoutWidthType {

ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.ts

@@ -63,7 +63,7 @@ export class SelectDashboardBreakpointComponent implements OnInit, OnDestroy {
   }
 
   selectLayoutChanged() {
-    this.dashboardCtrl.layouts.main.layoutCtx.ctrl.updatedCurrentBreakpoint(this.selectedBreakpoint);
+    this.dashboardUtils.updatedLayoutForBreakpoint(this.dashboardCtrl.layouts.main, this.selectedBreakpoint);
     this.dashboardCtrl.updateLayoutSizes();
   }