Introduce delay and expand path matching on Backoffice router for lazy-loaded routes (#19409)

* implement use of pathMatch: 'full' for empty redirects

* awaitStability feature for route redirects

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts

@@ -17,6 +17,7 @@ export class UmbDashboardElement extends UmbElementMixin(LitElement) {
 		},
 		{
 			path: '',
+			pathMatch: 'full',
 			redirectTo: 'tab1',
 		},
 	];

src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts

@@ -17,6 +17,7 @@ export class UmbExampleModal extends UmbModalBaseElement {
 		},
 		{
 			path: '',
+			pathMatch: 'full',
 			redirectTo: 'modalOverview',
 		},
 	];

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-main.element.ts

@@ -63,8 +63,10 @@ export class UmbBackofficeMainElement extends UmbLitElement {
 
 		if (newRoutes.length > 0) {
 			newRoutes.push({
+				path: '',
+				pathMatch: 'full',
+				awaitStability: true,
 				redirectTo: newRoutes[0].path,
-				path: ``,
 			});
 
 			newRoutes.push({

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts

@@ -123,6 +123,7 @@ export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements U
 			if (!this._hasRootGroups) {
 				routes.push({
 					path: '',
+					pathMatch: 'full',
 					redirectTo: routes[0]?.path,
 				});
 			}

src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor.element.ts

@@ -205,12 +205,14 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 			});
 			routes.push({
 				path: '',
+				pathMatch: 'full',
 				redirectTo: 'root',
 				guards: [() => this.#processingTabId === undefined],
 			});
 		} else {
 			routes.push({
 				path: '',
+				pathMatch: 'full',
 				redirectTo: routes[0]?.path,
 				guards: [() => this.#processingTabId === undefined],
 			});

src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/views/edit/content-editor.element.ts

@@ -109,6 +109,7 @@ export class UmbContentWorkspaceViewEditElement extends UmbLitElement implements
 		if (routes.length !== 0) {
 			routes.push({
 				path: '',
+				pathMatch: 'full',
 				redirectTo: routes[0].path,
 			});
 

src/Umbraco.Web.UI.Client/src/packages/core/router/router-slot/model.ts

@@ -75,6 +75,9 @@ export interface IRedirectRoute<D = any> extends IRouteBase<D> {
 	// The paths the route should redirect to. Can either be relative or absolute.
 	redirectTo: string;
 
+	// First redirect when the routes appears stable. Delaying the redirect so other routes get the change to resolve first.
+	awaitStability?: boolean;
+
 	// Whether the query should be preserved when redirecting.
 	preserveQuery?: boolean;
 }

src/Umbraco.Web.UI.Client/src/packages/core/router/router-slot/router-slot.ts

@@ -314,6 +314,24 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 		}
 	}
 
+	private getRedirectDelay() {
+		if ('connection' in navigator) {
+			const connection =
+				navigator.connection || (navigator as any).mozConnection || (navigator as any).webkitConnection;
+
+			switch (connection.effectiveType) {
+				case 'slow-2g':
+				case '2g':
+					return 1200;
+				case '3g':
+					return 800;
+				case '4g':
+					return 200;
+			}
+		}
+		return 400;
+	}
+
 	/**
 	 * Loads a new path based on the routes.
 	 * Returns true if a navigation was made to a new page.
@@ -387,6 +405,14 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 				// Redirect if necessary
 				if (isRedirectRoute(route)) {
 					cleanup();
+					if (route.awaitStability === true) {
+						// await until browser is done loading, based on a guess:
+						const delay = this.getRedirectDelay();
+						await new Promise((resolve) => setTimeout(resolve, delay));
+						if (navigationInvalidated) {
+							return cancel();
+						}
+					}
 					handleRedirect(this, route);
 					return false;
 				}

src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/document-blueprint-workspace-editor.element.ts

@@ -79,6 +79,7 @@ export class UmbDocumentBlueprintWorkspaceEditorElement extends UmbLitElement {
 			// Using first single view as the default route for now (hence the math below):
 			routes.push({
 				path: '',
+				pathMatch: 'full',
 				redirectTo: routes[variants.length * variants.length]?.path,
 			});
 		}

src/Umbraco.Web.UI.Client/src/packages/media/media/dashboard/media-dashboard.element.ts

@@ -53,6 +53,7 @@ export class UmbMediaDashboardElement extends UmbLitElement {
 					},
 					{
 						path: '',
+						pathMatch: 'full',
 						redirectTo: 'collection',
 					},
 					{

src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/media-workspace-editor.element.ts

@@ -79,6 +79,7 @@ export class UmbMediaWorkspaceEditorElement extends UmbLitElement {
 			// Using first single view as the default route for now (hence the math below):
 			routes.push({
 				path: '',
+				pathMatch: 'full',
 				redirectTo: routes[variants.length * variants.length]?.path,
 			});
 		}

src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/member/member-workspace-editor.element.ts

@@ -81,6 +81,7 @@ export class UmbMemberWorkspaceEditorElement extends UmbLitElement {
 			// Using first single view as the default route for now (hence the math below):
 			routes.push({
 				path: '',
+				pathMatch: 'full',
 				redirectTo: routes[options.length * options.length]?.path,
 			});
 		}

src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/created/created-packages-section-view.element.ts

@@ -54,6 +54,7 @@ export class UmbCreatedPackagesSectionViewElement extends UmbLitElement implemen
 
 		routes.push({
 			path: '',
+			pathMatch: 'full',
 			redirectTo: 'overview',
 		});
 		routes.push({