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

machine.js

const delayRenderMs = 1000;
const loadBeforeAnimateMs = 2000;
const timeoutMs = 15 * 1000;
const minLoadMs = 250;


const machine = Machine(
  {
    id: "load",
    initial: "delay",
    states: {
      // Fist state is delay rendering. We don't render anything for a short
      // while, hoping we can get the data before it's weird that we don't
      // render anything.
      delay: {
        always: [{ target: "done", cond: "isAllLoaded" }],
        after: { [delayRenderMs]: { target: "required_load" } },
      },
      // If we go into the loading phas we enforce a minimum time to let the
      // ghosting render properly, before we transform to `done`.
      required_load: {
        after: { [minLoadMs]: { target: "load" } },
      },
      // Loading. After a while of non-animated loading we transform to an
      // animated step to communicate that we're still working.
      load: {
        always: [{ target: "done", cond: "isAllLoaded" }],
        after: { [loadBeforeAnimateMs]: { target: "animated_load" } },
      },
      // Animate until we're done, or the timeout is reached.
      animated_load: {
        always: [{ target: "done", cond: "isAllLoaded" }],
        after: { [timeoutMs]: { target: "done" } },
      },
      done: {
        always: [{ target: "reload", cond: "isNotAllLoaded" }],
      },
      reload: {
        always: [{ target: "done", cond: "isAllLoaded" }],
      },
    },
  },

);