til/xstate/make-immediate-and-delayed-transitions.md

# Make Immediate And Delayed Transitions

An [XState](https://xstate.js.org/docs/) state can define an `on` key with an
object. The object can define one or more events that the state listens for and
transitions in response to. In addition to transitioning in response to an
event, you can have a state do both _immediate_ and _delayed_ transitions.

Here is an example state machine.

```javascript
export const loadingSpinner = createMachine(
  {
    initial: 'pending',
    context: {},
    states: {
      pending: {
        always: [
          { target: 'loading' }
        ]
      },
      loading: {
        after: {
          5000: { target: 'done' }
        }
      },
      done: {
        final: true
      }
    }
  }
);
```

This machine will start in the `pending` state. The `always` object will
immediately fire which will trigger a transition to the `loading` state. There
the `after` object will schedule a transition to the `done` state to happen in
5 seconds (5000ms).

The
[`always`](https://xstate.js.org/docs/guides/transitions.html#eventless-always-transitions)
is the immediate transition. The
[`after`](https://xstate.js.org/docs/guides/delays.html#delayed-transitions) is
the delayed transition.

The "eventless" `always` transition, in practice, is more useful when combined
with a condition. That allows you to define an immediate transition that only
takes place if some condition has already been met (e.g. does the `context`
already contain the thing we were about to look up?).