use useTransition for tab container

src/components/TabContainer.tsx

@@ -6,6 +6,7 @@ import React, {
   useContext,
   useMemo,
   useState,
+  useTransition,
 } from "react";
 
 import { ThemeContext } from "../themes/ThemeContext";
@@ -28,12 +29,17 @@ export const TabContainer: React.FC<TabContainerProps> = ({
   defaultTab,
 }) => {
   const [selected, setSelected] = useState(defaultTab);
+  const [optimistic, setOptimistic] = useState(defaultTab);
+  const [pending, startTransition] = useTransition();
   const activeTabDef = useMemo(
     () => tabs.find((t) => t.id === selected),
     [selected, tabs],
   );
   const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setSelected(e.currentTarget.value);
+    setOptimistic(e.currentTarget.value);
+    startTransition(() => {
+      setSelected(e.currentTarget.value);
+    });
   }, []);
 
   const theme = useContext(ThemeContext);
@@ -89,6 +95,7 @@ export const TabContainer: React.FC<TabContainerProps> = ({
                   display: "flex",
                   flexDirection: "column",
                   justifyContent: "center",
+                  opacity: pending && id === optimistic ? 0.5 : 1,
                 }}
               >
                 {typeof label === "string" ? (

src/components/settings/Slow.tsx

@@ -0,0 +1,21 @@
+import React, { memo } from "react";
+
+function SlowPost({ index }: { index: number }) {
+  const startTime = performance.now();
+  while (performance.now() - startTime < 1) {
+    // Do nothing for 1 ms per item to emulate extremely slow code
+  }
+
+  return <li className="item">Post #{index + 1}</li>;
+}
+
+export const Slow = memo(function PostsTab() {
+  // Log once. The actual slowdown is inside SlowPost.
+  console.log("[ARTIFICIALLY SLOW] Rendering 500 <SlowPost />");
+
+  const items = [];
+  for (let i = 0; i < 300; i++) {
+    items.push(<SlowPost key={i} index={i} />);
+  }
+  return <ul className="items">{items}</ul>;
+});