feat: draw the linked page's skeleton while a connector link opens

components/connector/__tests__/connector-client.test.tsx

@@ -1,5 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
+import { renderToString } from 'react-dom/server';
+import { TARGET_NAMES } from '@/lib/connector/registry';
+import { CONNECTOR_SURFACES } from '@/lib/boot-skeleton/surfaces';
 
 // A connector link that can't be opened explains why in the reader's
 // language (keys in tests), not in English only.
@@ -27,3 +30,21 @@ describe('connector link page', () => {
     window.history.replaceState(null, '', '/');
   });
 });
+
+describe('connector link page while it resolves', () => {
+  // The server HTML is what shows until the redirect: the skeleton of the
+  // page the link opens, with the opening text as its status message.
+  it.each(TARGET_NAMES)('%s draws its destination skeleton', (target) => {
+    const html = renderToString(<ConnectorClient target={target} />);
+    const surface = CONNECTOR_SURFACES[target];
+    expect(html).toContain(`data-boot-skeleton="${surface}"`);
+    expect(html).toContain('role="status"');
+    expect(html).toContain('opening');
+  });
+
+  it('keeps the plain text for a target it does not know', () => {
+    const html = renderToString(<ConnectorClient target="constructor" />);
+    expect(html).not.toContain('data-boot-skeleton');
+    expect(html).toContain('opening');
+  });
+});

components/connector/connector-client.tsx

@@ -7,6 +7,8 @@ import { resolveTarget, type ResolveResult } from '@/lib/connector/registry';
 import { appPath } from '@/lib/deep-links';
 import { replaceWindowLocation } from '@/lib/browser-navigation';
 import { productName } from '@/lib/product-name';
+import { CONNECTOR_SURFACES } from '@/lib/boot-skeleton/surfaces';
+import { RouteSkeleton } from '@/components/boot-skeleton/route-skeleton';
 
 const APP_VERSION = process.env.NEXT_PUBLIC_APP_VERSION || '';
 
@@ -49,6 +51,12 @@ export function ConnectorClient({ target }: { target: string }) {
   }, [destination]);
 
   if (result === null || result.kind === 'ok') {
+    // The page the link opens, as its skeleton: the boot script has already
+    // set that page's variant attributes from the link's parameters, so the
+    // hard redirect lands on the same shapes. No bottom bar labels: this page
+    // is English only and the destination may not be.
+    const surface = Object.hasOwn(CONNECTOR_SURFACES, target) ? CONNECTOR_SURFACES[target] : null;
+    if (surface) return <RouteSkeleton surface={surface} label={t('opening')} />;
     return <Shell>{t('opening')}</Shell>;
   }