Skip to content

Instantly share code, notes, and snippets.

@Schniz

Schniz/async-component.tsx

Created January 24, 2023 09:16
Show Gist options
  • Save Schniz/d52589cf608833af889d0e9eba83d2cf to your computer and use it in GitHub Desktop.
Save Schniz/d52589cf608833af889d0e9eba83d2cf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Schniz created this gist Jan 24, 2023.
    5 changes: 5 additions & 0 deletions async-component.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    export function asyncComponent<T>(
    fn: (props: T) => Promise<JSX.Element>
    ): React.FC<T> {
    return fn as any;
    }
    28 changes: 28 additions & 0 deletions generator-component.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    import { Suspense } from "react";
    import { asyncComponent } from "./async-component";

    export function generatorComponent<T>(
    fn: (props: T) => AsyncGenerator<JSX.Element, JSX.Element, JSX.Element>
    ): React.FC<T> {
    return (props: T) => {
    return <GeneratorComponent generator={fn(props)} />;
    };
    }

    const GeneratorComponent = asyncComponent(
    async (props: {
    generator: AsyncGenerator<JSX.Element, JSX.Element, JSX.Element>;
    }) => {
    const { generator } = props;
    let result = await generator.next();
    if (result.done) {
    return result.value;
    }

    return (
    <Suspense fallback={result.value}>
    <GeneratorComponent generator={generator} />
    </Suspense>
    );
    }
    );