feat: Custom feature flag appLayoutDelayedWidget to test async widget behavior

Author: georgylobko

pages/app/index.tsx

@@ -22,12 +22,18 @@ interface GlobalFlags {
   appLayoutWidget?: boolean;
   appLayoutToolbar?: boolean;
 }
+// used for local dev / testing
+interface CustomFlags {
+  appLayoutDelayedWidget?: boolean;
+}
 const awsuiVisualRefreshFlag = Symbol.for('awsui-visual-refresh-flag');
 const awsuiGlobalFlagsSymbol = Symbol.for('awsui-global-flags');
+const awsuiCustomFlagsSymbol = Symbol.for('awsui-custom-flags');
 
 interface ExtendedWindow extends Window {
   [awsuiVisualRefreshFlag]?: () => boolean;
   [awsuiGlobalFlagsSymbol]?: GlobalFlags;
+  [awsuiCustomFlagsSymbol]?: CustomFlags;
 }
 declare const window: ExtendedWindow;
 
@@ -86,15 +92,21 @@ function App() {
 }
 
 const history = createHashHistory();
-const { direction, visualRefresh, appLayoutWidget, appLayoutToolbar } = parseQuery(history.location.search);
+const { direction, visualRefresh, appLayoutWidget, appLayoutToolbar, appLayoutDelayedWidget } = parseQuery(
+  history.location.search
+);
 
 // The VR class needs to be set before any React rendering occurs.
 window[awsuiVisualRefreshFlag] = () => visualRefresh;
 if (!window[awsuiGlobalFlagsSymbol]) {
   window[awsuiGlobalFlagsSymbol] = {};
 }
+if (!window[awsuiCustomFlagsSymbol]) {
+  window[awsuiCustomFlagsSymbol] = {};
+}
 window[awsuiGlobalFlagsSymbol].appLayoutWidget = appLayoutWidget;
 window[awsuiGlobalFlagsSymbol].appLayoutToolbar = appLayoutToolbar;
+window[awsuiCustomFlagsSymbol].appLayoutDelayedWidget = appLayoutDelayedWidget;
 
 // Apply the direction value to the HTML element dir attribute
 document.documentElement.setAttribute('dir', direction);

src/app-layout/utils/feature-flags.ts

@@ -7,6 +7,15 @@ import { getGlobalFlag } from '@cloudscape-design/component-toolkit/internal';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
 import { AppLayoutToolbarPublicContext } from '../visual-refresh-toolbar/contexts';
 
+const getCutomFlag = (flagName: string) => {
+  const isBrowser = typeof window !== 'undefined';
+  if (!isBrowser) {
+    return {};
+  }
+  const awsuiCustomFlagsSymbol = Symbol.for('awsui-custom-flags');
+  return window?.[awsuiCustomFlagsSymbol as any]?.[flagName as any];
+};
+
 //   useAppLayoutFlagEnabled is set to true only in consoles. It controls if AppLayout theme is toolbar
 export const useAppLayoutFlagEnabled = () => {
   const isRefresh = useVisualRefresh();
@@ -23,3 +32,7 @@ export const useAppLayoutToolbarDesignEnabled = () => {
 
   return isToolbarPublic || isToolbarPrivate;
 };
+
+export const isAppLayoutDelayedWidget = () => {
+  return !!getCutomFlag('appLayoutDelayedWidget');
+};

src/app-layout/visual-refresh-toolbar/internal.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef, useState } from 'react';
 
+import { isAppLayoutDelayedWidget } from '../utils/feature-flags';
 import { AppLayoutState as AppLayoutStateImplementation, createWidgetizedAppLayoutState } from './app-layout-state';
 import { createWidgetizedAppLayoutDrawer, createWidgetizedAppLayoutGlobalDrawers } from './drawer';
 import { createWidgetizedAppLayoutNavigation } from './navigation';
@@ -33,7 +34,7 @@ export const AppLayoutWidgetizedState = createWidgetizedAppLayoutState(
   createAppLayoutPart({ Component: AppLayoutStateImplementation })
 );
 
-const enableDelayedComponents = false;
+const enableDelayedComponents = isAppLayoutDelayedWidget();
 
 export function createAppLayoutPart({ Component }: { Component: React.JSXElementConstructor<any> }) {
   const AppLayoutPartLoader = ({ Skeleton, ...props }: any) => {