Your UI has states.
Start treating them that way.

import { createWorker, type Worker, type Workflow } from '@workflow-ts/core';

// Props: inputs from the hosting screen or parent workflow.
export interface Props { userId: string }

// State: every meaningful step the screen can be in, as a tagged union.
// There are no illegal combinations; the machine is always in exactly one case.
export type State =
  | { type: 'loading' }
  | { type: 'loaded'; name: string }
  | { type: 'error'; message: string };

// Output: events this workflow emits upward to its parent.
export interface Output { type: 'closed' }

// Rendering: the framework-agnostic view model. One shape per state.
// The UI only ever sees one of these; callbacks are how it sends events back.
export type Rendering =
  | { type: 'loading'; close: () => void }
  | { type: 'loaded'; name: string; reload: () => void; close: () => void }
  | { type: 'error'; message: string; retry: () => void; close: () => void };

export const profileWorkflow: Workflow<Props, State, Output, Rendering> = {
  // Start in 'loading'. A snapshot can override this during rehydration.
  initialState: () => ({ type: 'loading' }),

  // render() runs on every state change. Pure function of (props, state).
  // It returns a Rendering and may start render-scoped workers for async work.
  render: (_props, state, ctx) => {
    switch (state.type) {
      case 'loading':
        // Start the profile-load worker while this state is active.
        // When the worker resolves, its result becomes the next state.
        // If we leave 'loading' before it finishes, the worker is cancelled.
        ctx.runWorker(loadProfileWorker, 'profile-load', (r) => () => ({
          state: r.ok
            ? { type: 'loaded', name: r.name }
            : { type: 'error', message: r.message },
        }));
        return { type: 'loading', close: () => emitClosed(ctx) };

      case 'loaded':
        return {
          type: 'loaded',
          name: state.name,
          // Reload sends an action that transitions back to 'loading',
          // which (above) restarts the worker. No imperative fetch here.
          reload: () => ctx.actionSink.send(() => ({ state: { type: 'loading' } })),
          close:  () => emitClosed(ctx),
        };

      case 'error':
        return {
          type: 'error',
          message: state.message,
          // Retry is the same transition as reload: go back to 'loading'.
          retry: () => ctx.actionSink.send(() => ({ state: { type: 'loading' } })),
          close: () => emitClosed(ctx),
        };
    }
  },
};