feat: rewrite preview to use React.Suspense

src/hooks/useSuspendable.ts

@@ -0,0 +1,63 @@
+import { useReducer, useCallback, useRef } from "react";
+
+type Status = "idle" | "pending" | "resolved" | "rejected";
+
+type Action<T> =
+  | { type: "start" }
+  | { type: "resolve"; payload: T }
+  | { type: "reject"; payload: Error };
+
+type State<T> = {
+  status: Status;
+  result: T | null;
+  error: Error | null;
+};
+
+function reducer<T>(state: State<T>, action: Action<T>): State<T> {
+  switch (action.type) {
+    case "start":
+      return { ...state, status: "pending" };
+    case "resolve":
+      return { status: "resolved", result: action.payload, error: null };
+    case "reject":
+      return { status: "rejected", result: null, error: action.payload };
+    default:
+      throw new Error("Unhandled action type");
+  }
+}
+
+export function useSuspendable<T>(): [
+  T | null,
+  Error | null,
+  Status,
+  (promise: Promise<T>) => Promise<void>,
+  Promise<T> | null,
+] {
+  const [state, dispatch] = useReducer(reducer, {
+    status: "idle",
+    result: null,
+    error: null,
+  });
+
+  const pendingPromise = useRef<Promise<T> | null>(null);
+
+  const suspend = useCallback((promise: Promise<T>) => {
+    pendingPromise.current = promise;
+    dispatch({ type: "start" });
+    return promise
+      .then((data) => {
+        dispatch({ type: "resolve", payload: data });
+      })
+      .catch((error) => {
+        dispatch({ type: "reject", payload: error as Error });
+      });
+  }, []);
+
+  return [
+    state.result as T | null,
+    state.error,
+    state.status,
+    suspend,
+    pendingPromise.current,
+  ];
+}