(null);
+
+ useEffect(() => {
+ setTimeout(() => {
+ setMount(true);
+ }, 1000);
+ }, []);
+
+ if (enableSyncComponents || (mount && enableDelayedComponents)) {
+ return ;
+ }
+
+ if (Skeleton) {
+ return ;
+ }
+ return ;
+ };
+ return AppLayoutPartLoader;
+}
diff --git a/src/app-layout/visual-refresh-toolbar/reverse-portal.tsx b/src/app-layout/visual-refresh-toolbar/reverse-portal.tsx
new file mode 100644
index 0000000000..8e997c83a2
--- /dev/null
+++ b/src/app-layout/visual-refresh-toolbar/reverse-portal.tsx
@@ -0,0 +1,228 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * This file contains code copied from the npm package: https://www.npmjs.com/package/react-reverse-portal
+ *
+ * We don’t use the original package directly for the following reasons:
+ *
+ * - The original library throws errors during SSR, whereas this version returns `null` and degrades gracefully.
+ * - The original package has no test coverage, which makes it unreliable. This version is fully covered by unit tests.
+ *
+ * The implementation remains unchanged and uses class components, along with the original comments.
+ */
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+interface BaseOptions {
+ attributes?: { [key: string]: string };
+}
+
+type HtmlOptions = BaseOptions & {
+ containerElement?: keyof HTMLElementTagNameMap;
+};
+
+type Options = HtmlOptions;
+
+type Component = React.Component
| React.ComponentType
;
+
+type ComponentProps> = C extends Component ? P : never;
+
+interface PortalNodeBase> {
+ // Used by the out portal to send props back to the real element
+ // Hooked by InPortal to become a state update (and thus rerender)
+ setPortalProps(p: ComponentProps): void;
+ // Used to track props set before the InPortal hooks setPortalProps
+ getInitialPortalProps(): ComponentProps;
+ // Move the node from wherever it is, to this parent, replacing the placeholder
+ mount(newParent: Node, placeholder: Node): void;
+ // If mounted, unmount the node and put the initial placeholder back
+ // If an expected placeholder is provided, only unmount if that's still that was the
+ // latest placeholder we replaced. This avoids some race conditions.
+ unmount(expectedPlaceholder?: Node): void;
+}
+export interface HtmlPortalNode = Component> extends PortalNodeBase {
+ element: HTMLElement;
+}
+type AnyPortalNode = Component> = HtmlPortalNode;
+
+// This is the internal implementation: the public entry points set elementType to an appropriate value
+const createPortalNode = >(options?: Options): AnyPortalNode => {
+ let initialProps = {} as ComponentProps;
+
+ let parent: Node | undefined;
+ let lastPlaceholder: Node | undefined;
+
+ const element = document.createElement(options?.containerElement ?? 'div');
+
+ if (options && typeof options === 'object' && options.attributes) {
+ for (const [key, value] of Object.entries(options.attributes)) {
+ element.setAttribute(key, value);
+ }
+ }
+
+ const portalNode: AnyPortalNode = {
+ element,
+ setPortalProps: (props: ComponentProps) => {
+ initialProps = props;
+ },
+ getInitialPortalProps: () => {
+ return initialProps;
+ },
+ mount: (newParent: HTMLElement, newPlaceholder: HTMLElement) => {
+ if (newPlaceholder === lastPlaceholder) {
+ // Already mounted - noop.
+ return;
+ }
+ portalNode.unmount();
+
+ newParent.replaceChild(portalNode.element, newPlaceholder);
+
+ parent = newParent;
+ lastPlaceholder = newPlaceholder;
+ },
+ unmount: (expectedPlaceholder?: Node) => {
+ if (expectedPlaceholder && expectedPlaceholder !== lastPlaceholder) {
+ // Skip unmounts for placeholders that aren't currently mounted
+ // They will have been automatically unmounted already by a subsequent mount()
+ return;
+ }
+
+ if (parent && lastPlaceholder) {
+ parent.replaceChild(lastPlaceholder, portalNode.element);
+
+ parent = undefined;
+ lastPlaceholder = undefined;
+ }
+ },
+ } as AnyPortalNode;
+
+ return portalNode;
+};
+
+interface InPortalProps {
+ node: AnyPortalNode;
+ children: React.ReactNode;
+}
+
+class InPortal extends React.PureComponent {
+ constructor(props: InPortalProps) {
+ super(props);
+ this.state = {
+ nodeProps: this.props.node?.getInitialPortalProps() ?? {},
+ };
+ }
+
+ addPropsChannel = () => {
+ if (!this.props.node) {
+ return;
+ }
+ Object.assign(this.props.node, {
+ setPortalProps: (props: object) => {
+ // Rerender the child node here if/when the out portal props change
+ this.setState({ nodeProps: props });
+ },
+ });
+ };
+
+ componentDidMount() {
+ this.addPropsChannel();
+ }
+
+ componentDidUpdate() {
+ this.addPropsChannel();
+ }
+
+ render() {
+ const { children, node } = this.props;
+
+ if (!node) {
+ return null;
+ }
+
+ return ReactDOM.createPortal(
+ React.Children.map(children, child => {
+ if (!React.isValidElement(child)) {
+ return child;
+ }
+ return React.cloneElement(child, this.state.nodeProps);
+ }),
+ node.element
+ );
+ }
+}
+
+type OutPortalProps> = {
+ node: AnyPortalNode;
+} & Partial>;
+
+class OutPortal> extends React.PureComponent> {
+ private placeholderNode = React.createRef();
+ private currentPortalNode?: AnyPortalNode;
+
+ constructor(props: OutPortalProps) {
+ super(props);
+ this.passPropsThroughPortal();
+ }
+
+ passPropsThroughPortal() {
+ const propsForTarget = Object.assign({}, this.props, { node: undefined });
+ this.props.node?.setPortalProps?.(propsForTarget);
+ }
+
+ componentDidMount() {
+ const node = this.props.node as AnyPortalNode;
+ this.currentPortalNode = node;
+
+ const placeholder = this.placeholderNode.current!;
+ if (!placeholder) {
+ return;
+ }
+ const parent = placeholder.parentNode!;
+ node.mount(parent, placeholder);
+ this.passPropsThroughPortal();
+ }
+
+ componentDidUpdate() {
+ // We re-mount on update, just in case we were unmounted (e.g. by
+ // a second OutPortal, which has now been removed)
+ const node = this.props.node as AnyPortalNode;
+
+ // If we're switching portal nodes, we need to clean up the current one first.
+ if (this.currentPortalNode && node !== this.currentPortalNode) {
+ this.currentPortalNode.unmount(this.placeholderNode.current!);
+ this.currentPortalNode = node;
+ }
+
+ const placeholder = this.placeholderNode.current!;
+ const parent = placeholder.parentNode!;
+ node.mount(parent, placeholder);
+ this.passPropsThroughPortal();
+ }
+
+ componentWillUnmount() {
+ const node = this.props.node as AnyPortalNode;
+ if (!node) {
+ return;
+ }
+ node.unmount(this.placeholderNode.current!);
+ }
+
+ render() {
+ if (!this.props.node) {
+ return null;
+ }
+
+ // Render a placeholder to the DOM, so we can get a reference into
+ // our location in the DOM, and swap it out for the portaled node.
+ const tagName = this.props.node.element.tagName;
+ const type = tagName.toLowerCase();
+
+ return React.createElement(type, { ref: this.placeholderNode });
+ }
+}
+
+const createHtmlPortalNode = createPortalNode;
+
+export { createHtmlPortalNode, InPortal, OutPortal };
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
index 38115018e0..e686aa5546 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/index.tsx
@@ -5,147 +5,73 @@ import clsx from 'clsx';
import VisualContext from '../../../internal/components/visual-context';
import customCssProps from '../../../internal/generated/custom-css-properties';
-import { useMobile } from '../../../internal/hooks/use-mobile';
-import { highContrastHeaderClassName } from '../../../internal/utils/content-header-utils';
-import { AppLayoutPropsWithDefaults } from '../../interfaces';
+import { AppLayoutInternalProps } from '../interfaces';
+import {
+ AppLayoutSkeletonBottomContentSlot,
+ AppLayoutSkeletonSideSlot,
+ AppLayoutSkeletonTopContentSlot,
+ AppLayoutSkeletonTopSlot,
+} from '../internal';
+import { useAppLayout } from '../use-app-layout';
+import { useSkeletonSlotsAttributes } from './widget-slots/use-skeleton-slots-attributes';
-import sharedStyles from '../../resize/styles.css.js';
import testutilStyles from '../../test-classes/styles.css.js';
import styles from './styles.css.js';
-const contentTypeCustomWidths: Array = ['dashboard', 'cards', 'table'];
+export interface SkeletonLayoutProps {
+ appLayoutProps: AppLayoutInternalProps;
+ appLayoutState: ReturnType;
+}
-interface SkeletonLayoutProps
- extends Pick<
- AppLayoutPropsWithDefaults,
- | 'notifications'
- | 'headerVariant'
- | 'contentHeader'
- | 'content'
- | 'contentType'
- | 'maxContentWidth'
- | 'disableContentPaddings'
- | 'navigation'
- | 'navigationOpen'
- | 'navigationWidth'
- | 'tools'
- | 'toolsOpen'
- | 'toolsWidth'
- | 'placement'
- > {
- style?: React.CSSProperties;
- toolbar?: React.ReactNode;
- splitPanelOpen?: boolean;
- sideSplitPanel?: React.ReactNode;
- bottomSplitPanel?: React.ReactNode;
- globalTools?: React.ReactNode;
- globalToolsOpen?: boolean;
- navigationAnimationDisabled?: boolean;
- isNested?: boolean;
+export interface RootSkeletonLayoutProps extends SkeletonLayoutProps {
+ skeletonSlotsAttributes: ReturnType;
}
-export const SkeletonLayout = React.forwardRef(
- (
- {
- style,
- notifications,
- headerVariant,
- contentHeader,
- content,
- navigation,
- navigationOpen,
- navigationWidth,
- tools,
- globalTools,
- toolsOpen,
- toolsWidth,
- toolbar,
- sideSplitPanel,
- bottomSplitPanel,
- splitPanelOpen,
- placement,
- contentType,
- maxContentWidth,
- disableContentPaddings,
- globalToolsOpen,
- navigationAnimationDisabled,
- isNested,
- },
- ref
- ) => {
- const isMobile = useMobile();
- const isMaxWidth = maxContentWidth === Number.MAX_VALUE || maxContentWidth === Number.MAX_SAFE_INTEGER;
- const anyPanelOpen = navigationOpen || toolsOpen;
- return (
-
- {
+ const { appLayoutProps, appLayoutState, skeletonSlotsAttributes } = props;
+ const { registered } = appLayoutState;
+ const { contentHeader, content, navigationWidth } = appLayoutProps;
+ const {
+ wrapperElAttributes,
+ mainElAttributes,
+ contentWrapperElAttributes,
+ contentHeaderElAttributes,
+ contentElAttributes,
+ } = skeletonSlotsAttributes;
+
+ const isAppLayoutStateLoading = Object.keys(appLayoutState).length === 0;
+
+ return (
+
+
- {toolbar}
- {navigation && (
-
- {navigation}
-
- )}
-
- {notifications && (
-
- )}
- {notifications}
-
- {contentHeader &&
{contentHeader}
}
-
{content}
-
- {bottomSplitPanel}
-
- )}
-
- {sideSplitPanel && (
-
- {sideSplitPanel}
-
- )}
+ }
+ }
+ >
+
+
+ {!isAppLayoutStateLoading && }
- {tools}
+ {contentHeader &&
{contentHeader}
}
+ {/*delay rendering the content until registration of this instance is complete*/}
+
+ {isAppLayoutStateLoading || registered ? content : null}
+
{globalTools}
-
- );
- }
-);
+ {!isAppLayoutStateLoading &&
}
+
+ {!isAppLayoutStateLoading &&
}
+
+ {drawers && drawers.length > 0 &&
}
+
+ {resolvedNavigation &&
}
+