# apps/web/src/components/chat/ComposerActivityStatus.tsx · gitcafe/t3code

[View on GitCafe](https://git.cafe/gitcafe/t3code/blob/0647c481017f25ddff2ec1dff68ef3944489b6db/apps/web/src/components/chat/ComposerActivityStatus.tsx)

Repository: [gitcafe/t3code](https://git.cafe/gitcafe/t3code)

Visibility: public

Requested revision: 0647c481017f25ddff2ec1dff68ef3944489b6db

Requested commit: 0647c481017f25ddff2ec1dff68ef3944489b6db

Commit: 0647c481017f25ddff2ec1dff68ef3944489b6db

Blob: 7a8b83ae73666216c9a59d8a8660afc4db9c25fd

Size: 687 bytes

[Immutable source](https://git.cafe/gitcafe/t3code/blob/0647c481017f25ddff2ec1dff68ef3944489b6db/apps/web/src/components/chat/ComposerActivityStatus.tsx?format=markdown)

```
import { Spinner } from "~/components/ui/spinner";

import { threadSyncLabel, type ThreadSyncPhase } from "../../threadSync";
import { ComposerBanner } from "./ComposerBanner";

export function ComposerActivityRow({ phase }: { readonly phase: ThreadSyncPhase }) {
  return (
    <ComposerBanner.Row>
      <ComposerBanner.Icon>
        <Spinner />
      </ComposerBanner.Icon>
      <ComposerBanner.Content>
        <span
          className="shrink-0 whitespace-nowrap text-muted-foreground"
          data-composer-sync-status={phase}
          role="status"
        >
          {threadSyncLabel(phase)}
        </span>
      </ComposerBanner.Content>
    </ComposerBanner.Row>
  );
}

```