dev: restore the loading state for the demo placeholder (tldraw#4826)

followup to tldraw#4684 and
tldraw#4686
was on my todo list to restore some of the responsiveness, esp. on
slower networks


https://github.com/user-attachments/assets/6a52039d-40b0-4d4b-98f4-fde08665dfa2

### Change type

- [ ] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [x] `other`

---------

Co-authored-by: Steve Ruiz <[email protected]>

apps/docs/components/marketing/DemoTldraw.tsx

@@ -48,11 +48,13 @@ export default function DemoTldraw({ hidden }: { hidden: boolean }) {
 		editor.focus({ focusContainer: false })
 	}, [editor])
 
-	if (hidden) return null
-
 	return (
 		<>
-			<div ref={wrapper} className={cn('z-10 h-full w-full')} onFocus={handleEditorFocus}>
+			<div
+				ref={wrapper}
+				className={cn('z-10 h-full w-full', hidden ? 'hidden' : '')}
+				onFocus={handleEditorFocus}
+			>
 				<Tldraw
 					initialState="draw"
 					assetUrls={assetUrls}

apps/docs/components/marketing/demo.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import Image from 'next/image'
-import { lazy, Suspense, useState } from 'react'
+import { lazy, Suspense, useCallback, useState } from 'react'
 import LgBc from '../../public/images/ui-placeholder/lg-bc.jpg'
 import LgBl from '../../public/images/ui-placeholder/lg-bl.jpg'
 import LgTl from '../../public/images/ui-placeholder/lg-tl.jpg'
@@ -10,14 +10,34 @@ import SmBc from '../../public/images/ui-placeholder/sm-bc.jpg'
 import SmTl from '../../public/images/ui-placeholder/sm-tl.jpg'
 import { Button } from '../common/button'
 
+// We start loading the editor immediately (lazily), but display a fake
+// view first and require the user to click on it before we actually
+// display the real editor. This is to prevent accidental interactions
+// with the editor. If the user clicks the fake editor button before
+// the canvas is completely loaded, then we display the fake editor
+// with a loading state until it's ready.
+
 export function Demo() {
 	const [showCanvas, setShowCanvas] = useState<boolean>(false)
+	const [isLoading, setIsLoading] = useState<boolean>(false)
 
-	const onClick = () => {
+	const handleSkeletonClick = useCallback(() => {
+		setIsLoading(true)
 		setShowCanvas(true)
-	}
+	}, [])
+
+	return (
+		<div className="relative w-full border-t-[4px] border-b-[4px] md:border-[4px] border-blue-500 h-96 md:rounded-br-[16px] md:rounded-bl-[16px] md:rounded-tl-[16px] md:rounded-tr-[20px] sm:h-[40rem] max-h-[80vh] overflow-hidden">
+			<Suspense fallback={<FakeTldraw isLoading={isLoading} onClick={handleSkeletonClick} />}>
+				<DemoTldraw hidden={!showCanvas} />
+			</Suspense>
+			{!showCanvas && <FakeTldraw isLoading={isLoading} onClick={handleSkeletonClick} />}
+		</div>
+	)
+}
 
-	const skeletonTldraw = (
+function FakeTldraw({ onClick, isLoading }: { onClick(): void; isLoading: boolean }) {
+	return (
 		<div className="absolute inset-0 z-20 bg-[#FBFCFE] cursor-pointer" onClick={onClick}>
 			<Image
 				src={LgTl}
@@ -50,19 +70,15 @@ export function Demo() {
 				className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[350px] h-auto sm:hidden"
 			/>
 			<div className="absolute inset-0 bg-[#FBFCFE]/50 flex items-center justify-center">
-				<Button onClick={onClick} caption={'Try it'} icon="play" className="shadow" />
+				<Button
+					onClick={onClick}
+					caption={isLoading ? 'Loading…' : 'Try it'}
+					icon="play"
+					className="shadow"
+				/>
 			</div>
 		</div>
 	)
-
-	return (
-		<div className="relative w-full border-t-[4px] border-b-[4px] md:border-[4px] border-blue-500 h-96 md:rounded-br-[16px] md:rounded-bl-[16px] md:rounded-tl-[16px] md:rounded-tr-[20px] sm:h-[40rem] max-h-[80vh] overflow-hidden">
-			<Suspense fallback={skeletonTldraw}>
-				<DemoTldraw hidden={false} />
-			</Suspense>
-			{!showCanvas && skeletonTldraw}
-		</div>
-	)
 }
 
 const DemoTldraw = lazy(() => import('./DemoTldraw'))