From 4f244bba820777691c7f5e4472038f1e8a7f72f6 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Wed, 19 Jul 2023 01:54:40 +0200
Subject: [PATCH] Fix timing with forced reflow

---
 src/index.ts | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 4892096..246ee65 100755
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,8 +14,8 @@ type PluginOptions = {
 };
 
 type ContainerSet = {
-	previous: Element;
-	next: Element;
+	previous: HTMLElement;
+	next: HTMLElement;
 };
 
 export default class SwupParallelPlugin extends Plugin {
@@ -122,12 +122,12 @@ export default class SwupParallelPlugin extends Plugin {
 			this.nextContainers.push(next);
 
 			previous.setAttribute('aria-hidden', 'true');
-			previous.classList.add('is-previous-container');
-			next.classList.add('is-next-container');
-
 			previous.before(next);
 
-			nextTick().then(() => next.classList.remove('is-next-container'));
+			next.classList.add('is-next-container');
+			this.forceReflow(next);
+			next.classList.remove('is-next-container');
+			previous.classList.add('is-previous-container');
 		});
 
 		console.log('containersInParallel', containersInParallel);
@@ -158,9 +158,14 @@ export default class SwupParallelPlugin extends Plugin {
 		const incomingDocument = new DOMParser().parseFromString(html, 'text/html');
 		return this.options.containers
 			.reduce((containers, selector: string) => {
-				const previous = document.querySelector(selector);
-				const next = incomingDocument.querySelector(selector);
+				const previous = document.querySelector<HTMLElement>(selector);
+				const next = incomingDocument.querySelector<HTMLElement>(selector);
 				return previous && next ? [...containers, { previous, next }] : containers;
 			}, [] as ContainerSet[]);
 	}
+
+	forceReflow(element?: HTMLElement) {
+		element = element || document.body;
+		return element?.offsetHeight;
+	}
 }