Suspense-list-bug.jsx

function getSuspendableComponent(t) {
	let state = false;

	const SuspendableComponent = () => {
		if (!state) {
			throw new Promise(resolve => {
				setTimeout(() => {
					state = true;
					resolve();
				}, t||3000);
			});
		}
		console.log(`resolving in ${t}`);
		return (<div>I resolved in {t}</div>);
	};
	return SuspendableComponent;
}

const CompA = getSuspendableComponent(200);
const CompB = getSuspendableComponent(20);
const CompC = getSuspendableComponent(400);
const CompD = getSuspendableComponent(2000);

const SuspenseHome = () => {
	const [showB, setShowB] = useState(false);

	return (
		<SuspenseList revealOrder="forwards">
			<Suspense fallback={<div>Loading...</div>}>
				<CompA />
			</Suspense>
			{(showB) && <Suspense fallback={<div>Loading...</div>}>
				<CompD />
			</Suspense>}
			<Suspense fallback={<div>Loading...</div>}>
				<CompB />
			</Suspense>
			<Suspense fallback={<div>Loading...</div>}>
				<CompC />
			</Suspense>
			<button onClick={() => {
				setShowB(true);
			}}>show B</button>
		</SuspenseList>

	);
};