fix(client): prevent infinite resize loop (#9232)

* clientWidth?

* spacer?

* size directive?

* size directive

* use const

packages/client/src/components/global/MkSpacer.vue

@@ -24,6 +24,8 @@ let ro: ResizeObserver;
 let root = $ref<HTMLElement>();
 let content = $ref<HTMLElement>();
 let margin = $ref(0);
+const widthHistory = [null, null] as [number | null, number | null];
+const heightHistory = [null, null] as [number | null, number | null];
 const shouldSpacerMin = inject('shouldSpacerMin', false);
 
 const adjust = (rect: { width: number; height: number; }) => {
@@ -47,9 +49,26 @@ onMounted(() => {
 			height: entries[0].borderBoxSize[0].blockSize,
 		});
 		*/
+
+		const width = root!.offsetWidth;
+		const height = root!.offsetHeight;
+
+		//#region Prevent infinite resizing
+		// https://github.com/misskey-dev/misskey/issues/9076
+		const pastWidth = widthHistory.pop();
+		widthHistory.unshift(width);
+		const pastHeight = heightHistory.pop();
+		heightHistory.unshift(height);
+
+
+		if (pastWidth === width && pastHeight === height) {
+			return;
+		}
+		//#endregion
+
 		adjust({
-			width: root!.offsetWidth,
+			width,
-			height: root!.offsetHeight,
+			height,
 		});
 	});
 	ro.observe(root!);

packages/client/src/directives/size.ts

@@ -8,6 +8,7 @@ const mountings = new Map<Element, {
 	resize: ResizeObserver;
 	intersection?: IntersectionObserver;
 	previousWidth: number;
+	twoPreviousWidth: number;
 }>();
 
 type ClassOrder = {
@@ -66,7 +67,13 @@ function calc(el: Element) {
 		delete info.intersection;
 	}
 
-	mountings.set(el, Object.assign(info, { previousWidth: width }));
+	mountings.set(el, { ...info, ...{ previousWidth: width, twoPreviousWidth: info.previousWidth }});
+
+	// Prevent infinite resizing
+	// https://github.com/misskey-dev/misskey/issues/9076
+	if (info.twoPreviousWidth === width) {
+		return;
+	}
 
 	const cached = cache.get(getOrderName(width, info.value));
 	if (cached) {
@@ -90,6 +97,7 @@ export default {
 			value: binding.value,
 			resize,
 			previousWidth: 0,
+			twoPreviousWidth: 0,
 		});
 
 		calc(src);