Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine({
  id: "animation",
  initial: "pending",
  context: {
    staleUsers: null,
    currentUsers: null,
  },
  states: {
    // loading the stale list is an async operation
    pending: {
      invoke: {
        src: "readStaleList",
        onDone: {
          target: "staleListLoaded",
          actions: assign({
            staleUsers: (_context, event) => event.data,
          }),
        },
      },
    },

    // while we wait for the new list of users to come in,
    // we show the stale list
    staleListLoaded: {
      on: {
        UPDATE_CURRENT_USERS: {
          target: "currentListLoaded",
          actions: assign({
            currentUsers: (_ctx, event) => event.users,
          }),
        },
      },
    },

    currentListLoaded: {
      on: {
        ANIMATE: "animatingStaleListOut",
      },
    },

    // fade out people not in new list, move the people to their new positions
    animatingStaleListOut: {
      invoke: {
        src: "animateStaleOut",
        onDone: {
          target: "animatingCurrentListIn",
        },
      },
      on: {
        // note:
        // this doesn't receive UPDATE_CURRENT_USERS
        // and neither does animatingCurrentListIn
        // to prevent breaking the animation. the tradeoff is
        // that stale data can possibly being shown
        // could probably be better!
      },
    },

    animatingCurrentListIn: {
      invoke: [
        { src: "animateCurrentIn", onDone: "static" },
        { src: "persistCurrentListAsStale" },
      ],

      on: {},
    },

    // change state so that stale and current are equal, this should
    // not trigger an animation
    static: {
      on: {
        UPDATE_CURRENT_USERS: {
          target: "animatingStaleListOut",
          actions: assign({
            staleUsers: (ctx) => ctx.currentUsers,
            currentUsers: (_ctx, event) => event.users,
          }),
        },
      },
    },
  },
});