Function App

exercises/06.optimization/02.solution.cache/index.tsx:9–52

()

const shipFallbackSrc = '/img/fallback-ship.png'

function App() {
	const [shipName, setShipName] = useState('Dreadnought')
	const [isTransitionPending, startTransition] = useTransition()
	const isPending = useSpinDelay(isTransitionPending, {
		delay: 300,
		minDuration: 350,
	})
	return (
		<div className="app-wrapper">
			<div className="app">
				<ErrorBoundary
					fallback={
						<div className="app-error">
							<p>Something went wrong!</p>
						</div>
					}
				>
					<Suspense
						fallback={<img style={{ maxWidth: 400 }} src={shipFallbackSrc} />}
					>
						<div className="search">
							<ShipSearch
								onSelection={(selection) => {
									startTransition(() => setShipName(selection))
								}}
							/>
						</div>
						<div className="details" style={{ opacity: isPending ? 0.6 : 1 }}>
							<ErrorBoundary fallback={<ShipError shipName={shipName} />}>
								{shipName ? (
									<Suspense fallback={<ShipFallback shipName={shipName} />}>
										<ShipDetails shipName={shipName} />
									</Suspense>
								) : (
									<p>Select a ship from the list to see details</p>
								)}
							</ErrorBoundary>
						</div>
					</Suspense>
				</ErrorBoundary>
			</div>
		</div>
	)
}

function ShipSearch({
	onSelection,