fix(webapp): end a failed lazy chunk in an error card with Try again

A next/dynamic loader that renders only a skeleton ignores the error
prop. When the device is offline, or chunk recovery gives up, the
skeleton stays forever.

ChunkLoadFallback is now the loading view for a lazy part. It shows
the skeleton while the chunk loads. On a failure, it shows the
EmptyState error card, and Try again calls the loader's retry, which
brings the skeleton back. The six Settings sections and both QR codes
use it.

The Share card's Present trigger no longer wraps the code. It is laid
over the code and hides while the error card shows, so Try again is
never inside a button. The pad QR card's skeleton is now square, to
match the loaded code.

Refs #463
Refs #464

Author: HMarzban

apps/webapp/src/components/ChunkLoadFallback.tsx

@@ -0,0 +1,27 @@
+import { EmptyState } from '@components/ui/EmptyState'
+import type { DynamicOptionsLoadingProps } from 'next/dynamic'
+import type { ReactNode } from 'react'
+
+interface ChunkLoadFallbackProps extends DynamicOptionsLoadingProps {
+  skeleton: ReactNode
+  /** Goes to the error state only, for example to put it on a surface that differs from the panel. */
+  className?: string
+}
+
+/**
+ * The `loading` view of a next/dynamic chunk. Offline, or after chunk recovery gives up, the
+ * skeleton would stay forever. `retry` puts the chunk back in loading, so the skeleton returns.
+ * The page-level `ChunkLoadError` in `pages/[...slugs].tsx` stays separate: it reloads the page.
+ */
+export function ChunkLoadFallback({ error, retry, skeleton, className }: ChunkLoadFallbackProps) {
+  if (!error) return skeleton
+  return (
+    <EmptyState
+      tone="error"
+      title="Couldn’t load this part."
+      body="Check your connection, then try again."
+      onRetry={retry ?? (() => window.location.reload())}
+      className={className}
+    />
+  )
+}

apps/webapp/src/components/TipTap/pad-title-section/PresentQrCode.tsx

@@ -1,3 +1,4 @@
+import { ChunkLoadFallback } from '@components/ChunkLoadFallback'
 import Button from '@components/ui/Button'
 import CloseButton from '@components/ui/CloseButton'
 import { QrVeil } from '@components/ui/QrVeil'
@@ -12,7 +13,12 @@ const ICON_SIZE = 20
 
 const QrCode = dynamic(() => import('@components/ui/QrCode'), {
   ssr: false,
-  loading: () => <div className="skeleton rounded-box aspect-square w-full" />
+  loading: (p) => (
+    <ChunkLoadFallback
+      {...p}
+      skeleton={<div className="skeleton rounded-box aspect-square w-full" />}
+    />
+  )
 })
 
 interface PresentQrCodeProps {
@@ -67,15 +73,18 @@ export function PresentQrCode({ value, title }: PresentQrCodeProps) {
 
   return (
     <>
-      <button
-        ref={triggerRef}
-        type="button"
-        onClick={open}
-        aria-label={`Present QR code for ${displayUrl}`}
-        className="group/qr-veil rounded-box focus-visible:ring-primary relative block w-full cursor-pointer focus-visible:ring-2 focus-visible:outline-none max-sm:mx-auto max-sm:max-w-56">
+      {/* The button sits over the code, not around it, because a failed load puts Try again in this box. */}
+      <div className="group/qr-box relative w-full max-sm:mx-auto max-sm:max-w-56">
         <QrCode value={value} quietZone={2} className="rounded-box w-full" />
-        <QrVeil icon={Icons.fullscreen} />
-      </button>
+        <button
+          ref={triggerRef}
+          type="button"
+          onClick={open}
+          aria-label={`Present QR code for ${displayUrl}`}
+          className="group/qr-veil rounded-box focus-visible:ring-primary absolute inset-0 cursor-pointer group-has-[[role=alert]]/qr-box:hidden focus-visible:ring-2 focus-visible:outline-none">
+          <QrVeil icon={Icons.fullscreen} />
+        </button>
+      </div>
 
       <dialog
         ref={dialogRef}
@@ -88,7 +97,9 @@ export function PresentQrCode({ value, title }: PresentQrCodeProps) {
           ref={stageRef}
           onClick={handleStageClick}
           className="bg-base-100 relative grid h-full w-full items-center justify-items-center gap-[5vh] px-[5vw] py-[5vh] text-center md:grid-cols-[auto_minmax(0,1fr)] md:justify-items-start md:gap-[5vw] md:text-left">
-          <QrCode value={value} className="rounded-box w-[min(80vw,55vh)] md:w-[min(86vh,52vw)]" />
+          <div className="w-[min(80vw,55vh)] md:w-[min(86vh,52vw)]">
+            <QrCode value={value} className="rounded-box w-full" />
+          </div>
           <div className="grid min-w-0 gap-[2.4vh]">
             <p className="text-base-content/60 text-[clamp(0.75rem,1.6vh,1.25rem)] font-semibold tracking-wide uppercase">
               Scan to open on your phone

apps/webapp/src/components/pages/document/components/PadQrCode.tsx

@@ -1,3 +1,4 @@
+import { ChunkLoadFallback } from '@components/ChunkLoadFallback'
 import { popoverPanelClassName } from '@components/ui/Popover'
 import { usePadShareUrl } from '@hooks/usePadShareUrl'
 import { twMerge } from '@utils/twMerge'
@@ -6,7 +7,13 @@ import { type CSSProperties, useEffect, useRef, useState } from 'react'
 
 const QrCode = dynamic(() => import('@components/ui/QrCode'), {
   ssr: false,
-  loading: () => <div className="skeleton rounded-box aspect-square w-full" />
+  loading: (p) => (
+    <ChunkLoadFallback
+      {...p}
+      skeleton={<div className="skeleton aspect-square w-full rounded-none" />}
+      className="bg-base-100 px-2 py-4"
+    />
+  )
 })
 
 const MIN_SIZE = 128

apps/webapp/src/components/settings/SettingsPanel.tsx

@@ -1,3 +1,4 @@
+import { ChunkLoadFallback } from '@components/ChunkLoadFallback'
 import { Avatar } from '@components/ui/Avatar'
 import Button, { dangerGhostClassName } from '@components/ui/Button'
 import CloseButton from '@components/ui/CloseButton'
@@ -27,22 +28,22 @@ import {
 import type { SettingsPanelProps, SupportInk, SupportRow, TabType } from './types'
 
 const ProfileSection = dynamic(() => import('./components/ProfileSection'), {
-  loading: () => <ProfileSkeleton />
+  loading: (p) => <ChunkLoadFallback {...p} skeleton={<ProfileSkeleton />} />
 })
 const DocumentsSection = dynamic(() => import('./components/DocumentsSection'), {
-  loading: () => <DocumentsSkeleton />
+  loading: (p) => <ChunkLoadFallback {...p} skeleton={<DocumentsSkeleton />} />
 })
 const AppearanceSection = dynamic(() => import('./components/AppearanceSection'), {
-  loading: () => <AppearanceSkeleton />
+  loading: (p) => <ChunkLoadFallback {...p} skeleton={<AppearanceSkeleton />} />
 })
 const SecuritySection = dynamic(() => import('./components/SecuritySection'), {
-  loading: () => <SecuritySkeleton />
+  loading: (p) => <ChunkLoadFallback {...p} skeleton={<SecuritySkeleton />} />
 })
 const NotificationsSection = dynamic(() => import('./components/NotificationsSection'), {
-  loading: () => <NotificationsSkeleton />
+  loading: (p) => <ChunkLoadFallback {...p} skeleton={<NotificationsSkeleton />} />
 })
 const ConnectedAppsSection = dynamic(() => import('./components/ConnectedAppsSection'), {
-  loading: () => <ConnectedAppsSkeleton />
+  loading: (p) => <ChunkLoadFallback {...p} skeleton={<ConnectedAppsSkeleton />} />
 })
 
 const STAR_SPARK_ANGLES = [0, 60, 120, 180, 240, 300] as const