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

machine.js

Machine(
  {
    context: {
      networkQuality: "good",
    },
    on: {
      REPORT_NETWORK_QUALITY: {
        actions: [
          assign({
            networkQuality: (_, ev) => ev.networkQuality,
          }),
          raise("NETWORK_QUALITY_REPORTED"),
        ],
      },
      DISMISS_NETWORK_QUALITY_WARNING: ".permanently_hidden",
    },
    initial: "hidden",
    states: {
      hidden: {
        entry: ["hide"],
        on: {
          NETWORK_QUALITY_REPORTED: {
            cond: "isQualityBad",
            target: "shown",
          },
        },
      },
      shown: {
        entry: ["show"],
        initial: "stabilising",
        states: {
          stabilising: {
            after: {
              2000: "stabilised",
            },
          },
          stabilised: {
            on: {
              "": {
                cond: "isQualityGood",
                target: "final",
              },
              NETWORK_QUALITY_REPORTED: {
                cond: "isQualityGood",
                target: "final",
              },
            },
          },
          final: {
            type: "final",
          },
        },
        onDone: "hidden",
      },
      permanently_hidden: {},
    },
  },
  {
    guards: {
      isQualityBad: (ctx) => ctx.networkQuality === "bad",
      isQualityGood: (ctx) => ctx.networkQuality === "good",
    },
  }
);