# 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?).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ploegert.gitbook.io/til/tools/xstate/make-immediate-and-delayed-transitions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.