perf(app): defer media capture routing and skip offscreen skeleton layout (#1732)

fluxer_app/src/features/app/components/skeleton/PlaceholderSpecs.ts

@@ -19,10 +19,12 @@ export interface PlaceholderMessageGroup {
 	readonly usernameWidth: number;
 	readonly timestampWidth: number;
 	readonly attachment: PlaceholderAttachmentSize | null;
+	readonly height: number;
 }
 
 interface MutablePlaceholderMessageGroup extends PlaceholderMessageGroup {
 	attachment: PlaceholderAttachmentSize | null;
+	height: number;
 }
 
 export interface PlaceholderSpecs {
@@ -100,20 +102,20 @@ function generatePlaceholderSpecs(options: PlaceholderGenerationOptions): Placeh
 		for (let line = 0; line < lineCount; line++) {
 			lineWidths.push(LINE_WIDTH_MIN + random() * LINE_WIDTH_RANGE);
 		}
+		const groupHeight = compact
+			? MESSAGE_HEIGHT_COMPACT * lineCount
+			: COZY_LEAD_MESSAGE_HEIGHT + COZY_GROUPED_MESSAGE_HEIGHT * (lineCount - 1);
 		groups.push({
 			lineWidths,
 			usernameWidth: USERNAME_WIDTH_MIN + random() * USERNAME_WIDTH_RANGE,
 			timestampWidth: TIMESTAMP_WIDTH_MIN + random() * TIMESTAMP_WIDTH_RANGE,
 			attachment: null,
+			height: groupHeight,
 		});
 		if (index > 0) {
 			totalHeight += groupSpacing;
 		}
-		if (compact) {
-			totalHeight += MESSAGE_HEIGHT_COMPACT * lineCount;
-		} else {
-			totalHeight += COZY_LEAD_MESSAGE_HEIGHT + COZY_GROUPED_MESSAGE_HEIGHT * (lineCount - 1);
-		}
+		totalHeight += groupHeight;
 	}
 	const availableGroupIndices = Array.from(Array(groups.length).keys());
 	for (let index = 0; index < attachments && availableGroupIndices.length > 0; index++) {
@@ -123,6 +125,7 @@ function generatePlaceholderSpecs(options: PlaceholderGenerationOptions): Placeh
 			height: randomInRange(random, ATTACHMENT_HEIGHT_MIN, ATTACHMENT_HEIGHT_MAX),
 		};
 		groups[groupIndex].attachment = attachment;
+		groups[groupIndex].height += attachment.height + ATTACHMENT_MARGIN;
 		totalHeight += attachment.height + ATTACHMENT_MARGIN;
 	}
 	return {compact, compactAvatarsVisible, groups, totalHeight, groupSpacing};

fluxer_app/src/features/app/components/skeleton/ScrollFillerSkeleton.module.css

@@ -44,6 +44,7 @@
 .messageGroup {
 	position: relative;
 	z-index: 0;
+	content-visibility: auto;
 }
 
 .group {

fluxer_app/src/features/app/components/skeleton/ScrollFillerSkeleton.tsx

@@ -52,7 +52,10 @@ function CozyScrollFillerSkeletonGroup({
 	return (
 		<flx-message-list-skeleton-group
 			className={flxElementClassName(styles.messageGroup)}
-			style={{marginBottom: resolveSkeletonGroupMarginBottom(groupIndex, groupCount, groupSpacing)}}
+			style={{
+				marginBottom: resolveSkeletonGroupMarginBottom(groupIndex, groupCount, groupSpacing),
+				containIntrinsicSize: `auto ${remFromPx(group.height)}`,
+			}}
 			data-flx="app.skeleton.scroll-filler-skeleton.cozy-scroll-filler-skeleton-group.message-group"
 		>
 			<flx-message-list-skeleton-group-row
@@ -170,7 +173,10 @@ function CompactScrollFillerSkeletonGroup({
 	return (
 		<flx-message-list-skeleton-group
 			className={flxElementClassName(styles.messageGroup)}
-			style={{marginBottom: resolveSkeletonGroupMarginBottom(groupIndex, groupCount, groupSpacing)}}
+			style={{
+				marginBottom: resolveSkeletonGroupMarginBottom(groupIndex, groupCount, groupSpacing),
+				containIntrinsicSize: `auto ${remFromPx(group.height)}`,
+			}}
 			data-flx="app.skeleton.scroll-filler-skeleton.compact-scroll-filler-skeleton-group.message-group"
 		>
 			<flx-message-list-skeleton-compact-messages

fluxer_app/src/features/app/state/Initialization.ts

@@ -16,7 +16,6 @@ class Initialization {
 	state: InitializationState = InitializationState.LOADING;
 	hasCompletedInitialLoad = false;
 	error: string | null = null;
-	readyPayload: unknown = null;
 
 	constructor() {
 		makeAutoObservable(this, {}, {autoBind: true});
@@ -46,29 +45,25 @@ class Initialization {
 	setLoading(): void {
 		this.state = InitializationState.LOADING;
 		this.error = null;
-		this.readyPayload = null;
 	}
 
 	@action
 	setConnecting(): void {
 		this.state = InitializationState.CONNECTING;
 		this.error = null;
-		this.readyPayload = null;
 	}
 
 	@action
-	setReady(payload: unknown): void {
+	setReady(): void {
 		this.state = InitializationState.READY;
 		this.hasCompletedInitialLoad = true;
 		this.error = null;
-		this.readyPayload = payload;
 	}
 
 	@action
 	setError(error: string): void {
 		this.state = InitializationState.ERROR;
 		this.error = error;
-		this.readyPayload = null;
 	}
 
 	@action
@@ -76,7 +71,6 @@ class Initialization {
 		this.state = InitializationState.LOADING;
 		this.hasCompletedInitialLoad = false;
 		this.error = null;
-		this.readyPayload = null;
 	}
 }