@olenbetong/appframe-ds 1.3.3 → 1.3.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olenbetong/appframe-ds
 
+## 1.3.4
+
+### Patch Changes
+
+- 9c2ba29: The data grid no longer freezes the page for seconds when it loads. Its loading overlay mounts one skeleton per visible cell, and Designsystemet's `Skeleton` calls `document.getAnimations()` on mount to synchronize its animation, so hundreds of skeletons scanned hundreds of animations each. The grid's skeleton slot now renders the same markup without that hook.
+
 ## 1.3.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -76,13 +76,13 @@
     "temporal-polyfill": "1.0.5"
   },
   "devDependencies": {
-    "@digdir/designsystemet-react": "1.22.0",
+    "@digdir/designsystemet-react": "1.23.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "9.4.0",
     "@mui/x-data-grid-premium": "8.29.3",
     "@mui/x-license": "8.29.3",
-    "@navikt/aksel-icons": "8.16.2",
+    "@navikt/aksel-icons": "8.17.2",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "16.3.3",

package/src/AfLookup/Lookup.tsx

@@ -5,7 +5,7 @@ import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { type DistributiveOmit, useLookupState } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
-import { useRef } from "react";
+import { useState } from "react";
 import { createPortal } from "react-dom";
 
 import { LookupCombobox, type LookupComboboxProps } from "./LookupCombobox.js";
@@ -63,7 +63,7 @@ export function useLookup<T extends Record<string, unknown>>({
 		getAnchorElement,
 		scrollParentSelector: "[data-virtualized-scroller]",
 	});
-	let initialSearchValueRef = useRef<string | undefined>(undefined);
+	let [initialSearchValue, setInitialSearchValue] = useState<string | undefined>(undefined);
 
 	function handleChange(item: T | null) {
 		props.onChange?.(item);
@@ -71,7 +71,9 @@ export function useLookup<T extends Record<string, unknown>>({
 	}
 
 	function handleOpenDialog(searchValue?: string) {
-		initialSearchValueRef.current = searchValue;
+		// openDialog renders synchronously (flushSync), which includes this update, so the combobox
+		// mounts with the search value already set.
+		setInitialSearchValue(searchValue);
 		openDialog();
 	}
 
@@ -93,7 +95,7 @@ export function useLookup<T extends Record<string, unknown>>({
 				{open && (
 					<LookupCombobox
 						{...props}
-						initialSearchValue={initialSearchValueRef.current}
+						initialSearchValue={initialSearchValue}
 						onClose={() => dialogRef.current?.close()}
 						onChange={handleChange}
 					/>

package/src/grid/slots/index.tsx

@@ -6,7 +6,6 @@ import {
 	Checkbox,
 	Divider,
 	Select,
-	Skeleton,
 	Spinner,
 	Switch,
 	Tag,
@@ -272,11 +271,39 @@ function BaseLinearProgress(props: GridSlotProps["baseLinearProgress"]) {
 	return <div {...(other as any)} role="progressbar" className={clsx("AfGrid-linearProgress", className)} />;
 }
 
+/**
+ * Renders Designsystemet's skeleton markup rather than its `Skeleton`
+ * component. The component synchronizes its animation with every other
+ * skeleton by calling `document.getAnimations()` when it mounts, and the grid's
+ * loading overlay mounts one per visible cell in the same commit - hundreds of
+ * scans over hundreds of animations, which froze the page for seconds on every
+ * load. Skeletons mounted together start their animation together anyway.
+ */
 function BaseSkeleton(props: GridSlotProps["baseSkeleton"]) {
-	let { variant, width, height, ...other } = props;
+	let { variant, width, height, className, style, ...other } = props;
+	let dsVariant = variant === "circular" ? "circle" : variant;
+
+	if (dsVariant === "text") {
+		return (
+			<span
+				{...(other as any)}
+				aria-hidden="true"
+				className={clsx("ds-skeleton", className)}
+				data-text={"-".repeat(Number(width) || 1)}
+				data-variant="text"
+				style={style}
+			/>
+		);
+	}
 
 	return (
-		<Skeleton {...(other as any)} variant={variant === "circular" ? "circle" : variant} width={width} height={height} />
+		<span
+			{...(other as any)}
+			aria-hidden="true"
+			className={clsx("ds-skeleton", className)}
+			data-variant={dsVariant}
+			style={{ width, height, ...style }}
+		/>
 	);
 }
 

package/src/grid/slots/slots.test.tsx

@@ -0,0 +1,39 @@
+import { render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { dsBaseSlots } from "./index.js";
+
+const BaseSkeleton = dsBaseSlots.baseSkeleton as React.ComponentType<Record<string, unknown>>;
+
+describe("baseSkeleton", () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	it("renders Designsystemet's skeleton markup", () => {
+		let { container } = render(<BaseSkeleton variant="rectangular" width={80} height={12} />);
+		let skeleton = container.firstElementChild as HTMLElement;
+
+		expect(skeleton).toHaveClass("ds-skeleton");
+		expect(skeleton).toHaveAttribute("data-variant", "rectangular");
+		expect(skeleton).toHaveAttribute("aria-hidden", "true");
+		expect(skeleton.style.width).toBe("80px");
+	});
+
+	it("does not scan the page's animations when many mount at once", () => {
+		// The loading overlay mounts one skeleton per visible cell. Designsystemet's
+		// Skeleton calls document.getAnimations() for each, which froze the page.
+		let getAnimations = vi.fn(() => []);
+		Object.defineProperty(document, "getAnimations", { value: getAnimations, configurable: true });
+
+		render(
+			<>
+				{Array.from({ length: 200 }, (_, index) => (
+					<BaseSkeleton key={index} variant="text" width={10} />
+				))}
+			</>,
+		);
+
+		expect(getAnimations).not.toHaveBeenCalled();
+	});
+});