lazy load HomePage Layout

Author: debsmita1

workspaces/homepage/plugins/homepage/package.json

@@ -67,7 +67,8 @@
     "@red-hat-developer-hub/backstage-plugin-homepage-common": "workspace:^",
     "@scalprum/react-core": "0.11.3",
     "react-grid-layout": "1.5.3",
-    "react-use": "17.6.1"
+    "react-use": "17.6.1",
+    "zod": "^4.0.0"
   },
   "peerDependencies": {
     "react": "16.13.1 || ^17.0.0 || ^18.2.0",

workspaces/homepage/plugins/homepage/src/alpha/components/CustomHomePageLayout.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HomePageLayoutProps } from '@backstage/plugin-home-react/alpha';
+
+import { HomePageCardConfig } from '../../types';
+import { HomePageLayout } from './HomePageLayout';
+
+/**
+ * Widget layout configuration keyed by widget name.
+ * @alpha
+ */
+export type WidgetLayoutConfig = Record<
+  string,
+  {
+    priority?: number;
+    breakpoints?: Record<
+      string,
+      { w?: number; h?: number; x?: number; y?: number }
+    >;
+  }
+>;
+
+/**
+ * Options for creating a config-driven home page layout component.
+ * @alpha
+ */
+export interface CustomHomePageLayoutOptions {
+  customizable: boolean;
+  layoutConfig: WidgetLayoutConfig;
+}
+
+/**
+ * Creates a home page layout component that applies widget layout config
+ * (priority, breakpoints) before rendering the grid.
+ *
+ * @alpha
+ */
+export function createCustomHomePageLayout({
+  customizable,
+  layoutConfig,
+}: CustomHomePageLayoutOptions) {
+  return function CustomHomePageLayout({ widgets }: HomePageLayoutProps) {
+    const processedWidgets: HomePageCardConfig[] = widgets
+      .map(widget => {
+        const widgetConfig = layoutConfig[widget.name ?? ''];
+        const configBreakpoints = widgetConfig?.breakpoints;
+
+        if (!configBreakpoints) return widget;
+
+        return {
+          ...widget,
+          breakpointLayouts: configBreakpoints,
+        };
+      })
+      .sort((a, b) => {
+        if (customizable) return 0;
+
+        const priorityA = layoutConfig[a.name ?? '']?.priority ?? 0;
+        const priorityB = layoutConfig[b.name ?? '']?.priority ?? 0;
+        return priorityB - priorityA;
+      });
+
+    return (
+      <HomePageLayout widgets={processedWidgets} customizable={customizable} />
+    );
+  };
+}

workspaces/homepage/plugins/homepage/src/alpha/extensions/homePageLayoutExtension.tsx

@@ -15,8 +15,19 @@
  */
 
 import { HomePageLayoutBlueprint } from '@backstage/plugin-home-react/alpha';
-import { HomePageLayout } from '../components/HomePageLayout';
-import { HomePageCardConfig } from '../../types';
+import { z } from 'zod';
+
+const breakpointLayoutSchema = z.object({
+  w: z.number().optional(),
+  h: z.number().optional(),
+  x: z.number().optional(),
+  y: z.number().optional(),
+});
+
+const widgetLayoutEntrySchema = z.object({
+  priority: z.number().optional(),
+  breakpoints: z.record(z.string(), breakpointLayoutSchema).optional(),
+});
 
 /**
  * Custom home page layout extension for the New Frontend System.
@@ -29,63 +40,21 @@ import { HomePageCardConfig } from '../../types';
 export const homePageLayoutExtension =
   HomePageLayoutBlueprint.makeWithOverrides({
     name: 'dynamic-homepage-layout',
-    config: {
-      schema: {
-        customizable: z => z.boolean().optional(),
-        widgetLayout: z =>
-          z
-            .record(
-              z.object({
-                priority: z.number().optional(),
-                breakpoints: z
-                  .record(
-                    z.object({
-                      w: z.number().optional(),
-                      h: z.number().optional(),
-                      x: z.number().optional(),
-                      y: z.number().optional(),
-                    }),
-                  )
-                  .optional(),
-              }),
-            )
-            .optional(),
-      },
+    configSchema: {
+      customizable: z.boolean().optional(),
+      widgetLayout: z.record(z.string(), widgetLayoutEntrySchema).optional(),
     },
     factory(originalFactory, { config }) {
       const customizable = config.customizable ?? true;
       const layoutConfig = config.widgetLayout ?? {};
 
       return originalFactory({
-        loader: async () =>
-          function CustomHomePageLayout({ widgets }) {
-            const processedWidgets: HomePageCardConfig[] = widgets
-              .map(widget => {
-                const widgetConfig = layoutConfig[widget.name ?? ''];
-                const configBreakpoints = widgetConfig?.breakpoints;
-
-                if (!configBreakpoints) return widget;
-
-                return {
-                  ...widget,
-                  breakpointLayouts: configBreakpoints,
-                };
-              })
-              .sort((a, b) => {
-                if (customizable) return 0; // keep original order
-
-                const priorityA = layoutConfig[a.name ?? '']?.priority ?? 0;
-                const priorityB = layoutConfig[b.name ?? '']?.priority ?? 0;
-                return priorityB - priorityA;
-              });
-
-            return (
-              <HomePageLayout
-                widgets={processedWidgets}
-                customizable={customizable}
-              />
-            );
-          },
+        loader: async () => {
+          const { createCustomHomePageLayout } = await import(
+            '../components/CustomHomePageLayout'
+          );
+          return createCustomHomePageLayout({ customizable, layoutConfig });
+        },
       });
     },
   });

workspaces/homepage/yarn.lock

@@ -9763,6 +9763,7 @@ __metadata:
     react: "npm:^16.13.1 || ^17.0.0 || ^18.0.0"
     react-grid-layout: "npm:1.5.3"
     react-use: "npm:17.6.1"
+    zod: "npm:^4.0.0"
   peerDependencies:
     react: 16.13.1 || ^17.0.0 || ^18.2.0
     react-dom: "*"