Improve page load performance (#2155)

4 files changed, 41 insertions, 31 deletions

diff --git a/.changeset/bright-planets-accept.md b/.changeset/bright-planets-accept.md
new file mode 100644
index 00000000..29dca10a
--- /dev/null
+++ b/.changeset/bright-planets-accept.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Improves page load performance on slower devices
diff --git a/packages/starlight/components/TableOfContents/starlight-toc.ts b/packages/starlight/components/TableOfContents/starlight-toc.ts
index 7a35ac3b..2fd940f0 100644
--- a/packages/starlight/components/TableOfContents/starlight-toc.ts
+++ b/packages/starlight/components/TableOfContents/starlight-toc.ts
@@ -1,7 +1,7 @@
 import { PAGE_TITLE_ID } from '../../constants';
 
 export class StarlightTOC extends HTMLElement {
-	private _current = this.querySelector('a[aria-current="true"]') as HTMLAnchorElement | null;
+	private _current = this.querySelector<HTMLAnchorElement>('a[aria-current="true"]');
 	private minH = parseInt(this.dataset.minH || '2', 10);
 	private maxH = parseInt(this.dataset.maxH || '3', 10);
 
@@ -12,9 +12,15 @@ export class StarlightTOC extends HTMLElement {
 		this._current = link;
 	}
 
+	private onIdle = (cb: IdleRequestCallback) =>
+		(window.requestIdleCallback || ((cb) => setTimeout(cb, 1)))(cb);
+
 	constructor() {
 		super();
+		this.onIdle(() => this.init());
+	}
 
+	private init = (): void => {
 		/** All the links in the table of contents. */
 		const links = [...this.querySelectorAll('a')];
 
@@ -73,21 +79,20 @@ export class StarlightTOC extends HTMLElement {
 
 		let observer: IntersectionObserver | undefined;
 		const observe = () => {
-			if (observer) observer.disconnect();
+			if (observer) return;
 			observer = new IntersectionObserver(setCurrent, { rootMargin: this.getRootMargin() });
 			toObserve.forEach((h) => observer!.observe(h));
 		};
 		observe();
 
-		const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
 		let timeout: NodeJS.Timeout;
 		window.addEventListener('resize', () => {
 			// Disable intersection observer while window is resizing.
 			if (observer) observer.disconnect();
 			clearTimeout(timeout);
-			timeout = setTimeout(() => onIdle(observe), 200);
+			timeout = setTimeout(() => this.onIdle(observe), 200);
 		});
-	}
+	};
 
 	private getRootMargin(): `-${number}px 0% ${number}px` {
 		const navBarHeight = document.querySelector('header')?.getBoundingClientRect().height || 0;
diff --git a/packages/starlight/package.json b/packages/starlight/package.json
index 9a92a7e2..2848fd55 100644
--- a/packages/starlight/package.json
+++ b/packages/starlight/package.json
@@ -192,7 +192,7 @@
     "@pagefind/default-ui": "^1.0.3",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
-    "astro-expressive-code": "^0.35.3",
+    "astro-expressive-code": "^0.35.4",
     "bcp-47": "^2.1.0",
     "hast-util-from-html": "^2.0.1",
     "hast-util-select": "^6.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index afe55a4c..9074ec8d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -146,8 +146,8 @@ importers:
         specifier: ^4.0.4
         version: 4.0.4
       astro-expressive-code:
-        specifier: ^0.35.3
-        version: 0.35.3(astro@4.10.2)
+        specifier: ^0.35.4
+        version: 0.35.4(astro@4.10.2)
       bcp-47:
         specifier: ^2.1.0
         version: 2.1.0
@@ -1467,8 +1467,8 @@ packages:
     requiresBuild: true
     optional: true
 
-  /@expressive-code/core@0.35.3:
-    resolution: {integrity: sha512-SYamcarAjufYhbuK/kfvJSvAXLsfnM7DKc78R7Dq4B73R5bKQK2m5zR0l57tXr4yp2C5Z8lu5xZncdwWxcmPdg==}
+  /@expressive-code/core@0.35.4:
+    resolution: {integrity: sha512-Vq8KeVKjCvBbgapQgwHZiHG3XmgN6itt3fCcIexz2RnoYpkv765AlpTlBGwEooXCEN++Pf0OFDer0l7G6vYO2Q==}
     dependencies:
       '@ctrl/tinycolor': 4.1.0
       hast-util-select: 6.0.2
@@ -1481,23 +1481,23 @@ packages:
       unist-util-visit-parents: 6.0.1
     dev: false
 
-  /@expressive-code/plugin-frames@0.35.3:
-    resolution: {integrity: sha512-QYytMq6IsaHgTofQ5b6d+CnbxkqLdikSF2hC+IL/ZZwPYHYZoUlmjIwmJZhY4/hHqJGELrtZsyVdlt06RntgmA==}
+  /@expressive-code/plugin-frames@0.35.4:
+    resolution: {integrity: sha512-f72vp6qqynqItFrIcDmDSbdHae23X47PEwma5kCOcaA3oKcSasb39L1SpDKWePw3TEpqE577zky+gVdGdblE+A==}
     dependencies:
-      '@expressive-code/core': 0.35.3
+      '@expressive-code/core': 0.35.4
     dev: false
 
-  /@expressive-code/plugin-shiki@0.35.3:
-    resolution: {integrity: sha512-aFQBPepv0zhVXqJFAvfQ4vXYv/meJKiqmEEKSxdjAfwXllIV49PDlnGEXmbGYjR4hUQQjbfDgzAbrbfePc3YVQ==}
+  /@expressive-code/plugin-shiki@0.35.4:
+    resolution: {integrity: sha512-cJn38L6dO8FvlN2/L1Pwfb6dK/EznvrjceGyjBclxXvNit0TsmInlpQQ2DonSRSFexZTt92kLYGbBTgIcRBMyw==}
     dependencies:
-      '@expressive-code/core': 0.35.3
+      '@expressive-code/core': 0.35.4
       shiki: 1.6.4
     dev: false
 
-  /@expressive-code/plugin-text-markers@0.35.3:
-    resolution: {integrity: sha512-gDdnQrfDRXw5Y+PKHJDkpAUdf2pthYOthGcgy3JB8GOTQ3EL1h+755Ct/bGc4MR6jn+dgnQP47uHMWQaccvN6Q==}
+  /@expressive-code/plugin-text-markers@0.35.4:
+    resolution: {integrity: sha512-n4bRnRfSOwP78Xaoza6yBfyrr4qOYmG5Iz9vpcwnhs/RDULundv2oNgPVbW9KUSvmlJKrLeJAIJE1MGEh2/PcQ==}
     dependencies:
-      '@expressive-code/core': 0.35.3
+      '@expressive-code/core': 0.35.4
     dev: false
 
   /@hapi/hoek@9.3.0:
@@ -2466,13 +2466,13 @@ packages:
     hasBin: true
     dev: false
 
-  /astro-expressive-code@0.35.3(astro@4.10.2):
-    resolution: {integrity: sha512-f1L1m3J3EzZHDEox6TXmuKo5fTSbaNxE/HU0S0UQmvlCowtOKnU/LOsoDwsbQSYGKz+fdLRPsCjFMiKqEoyfcw==}
+  /astro-expressive-code@0.35.4(astro@4.10.2):
+    resolution: {integrity: sha512-axzDLTcv8PsaLHe66G8SH4muiary6W5R7dXaLYTRYgLED7Ra7FSxLd17g9kfiD1Qz9OXIEw+8/xkTzABKdbLNw==}
     peerDependencies:
       astro: ^4.0.0-beta || ^3.3.0
     dependencies:
       astro: 4.10.2(@types/node@18.16.19)(typescript@5.4.5)
-      rehype-expressive-code: 0.35.3
+      rehype-expressive-code: 0.35.4
     dev: false
 
   /astro@4.10.2(@types/node@18.16.19)(typescript@5.4.5):
@@ -3514,13 +3514,13 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
-  /expressive-code@0.35.3:
-    resolution: {integrity: sha512-XjWWUCxS4uQjPoRM98R7SNWWIYlFEaOeHm1piWv+c7coHCekuWno81thsc3g/UJ+DajNtOEsIQIAAcsBQZ8LMg==}
+  /expressive-code@0.35.4:
+    resolution: {integrity: sha512-ps7Ln7QdEUVo+97ipuV6IzfciOk/2+mZXNVlYX/UiCkUwv+pdL0+oe50+DIF/fhWlFYh4Sf8tCrwi1YASxsrsA==}
     dependencies:
-      '@expressive-code/core': 0.35.3
-      '@expressive-code/plugin-frames': 0.35.3
-      '@expressive-code/plugin-shiki': 0.35.3
-      '@expressive-code/plugin-text-markers': 0.35.3
+      '@expressive-code/core': 0.35.4
+      '@expressive-code/plugin-frames': 0.35.4
+      '@expressive-code/plugin-shiki': 0.35.4
+      '@expressive-code/plugin-text-markers': 0.35.4
     dev: false
 
   /extend-shallow@2.0.1:
@@ -6175,10 +6175,10 @@ packages:
       functions-have-names: 1.2.3
     dev: true
 
-  /rehype-expressive-code@0.35.3:
-    resolution: {integrity: sha512-kj43Rg+WzYUs8RRr6XyBr60pnrIZEgbmn9yJoV6qka1UDpcx7r8icn6Q2uSAgaLtlEUy+HCPgQJraOZrA53LOQ==}
+  /rehype-expressive-code@0.35.4:
+    resolution: {integrity: sha512-HHYBTmZY5HBAO+bSP3wcin9gRGPnIio8fsFNP08a0CqjULjQNKMbUnda9Qot2VEh3o/jZ/vbuwNOTl2G3yG+bA==}
     dependencies:
-      expressive-code: 0.35.3
+      expressive-code: 0.35.4
     dev: false
 
   /rehype-format@5.0.0: