Manually starting an inertia event to trigger the loading screen

Index.vue

<template>
  <div>
    <button @click="simulateLoading">
      Simulate Loading
    </button>
  </div>
</template>
<script>
import Layout from "../Shared/Layout";
import { fireStartEvent, fireFinishEvent } from "@inertiajs/inertia/src/events";

export default {
  layout: Layout,
  methods: {
    simulateLoading() {
      console.log("start loading...");
      fireStartEvent();
      setTimeout(() => {
        fireFinishEvent({ completed: true });
      }, 5000);
      console.log("stop loading...");
    },
  },
};
</script>

Layout.vue

<template>
  <!-- This example requires Tailwind CSS v2.0+ -->
  <div class="h-screen flex flex-col overflow-hidden bg-gray-100">
    <!-- ... other parts of your app -->
    <main
      class="flex-1 relative overflow-y-auto focus:outline-none"
      tabindex="0"
      scroll-region
    >
      <loading-screen v-model="loading" />
      <slot />
    </main>
  </div>
</template>
<script>
import LoadingScreen from "./LoadingScreen";
import { Inertia } from "@inertiajs/inertia";

export default {
  components: {
    LoadingScreen,
  },
  data() {
    return {
      loading: false,
    };
  },
  created() {
    let timeout = null;

    // Set up loading by inertia
    Inertia.on("start", () => {
      timeout = setTimeout(() => (this.loading = true), 250);
    });
    Inertia.on("finish", () => {
      clearTimeout(timeout);
      if (!this.loading) {
        return;
      }

      this.loading = false;
    });
  },
};
</script>

LoadingScreen.vue

<template>
  <transition
    enter-active-class="transition-opacity ease-linear duration-200"
    enter-class="opacity-0"
    enter-to-class="opacity-100"
    leave-active-class="transition-opacity ease-linear duration-200"
    leave-class="opacity-100"
    leave-to-class="opacity-0"
  >
    <div
      v-show="value"
      v-bind="$attrs"
      class="w-full h-screen fixed inset-0 flex items-center justify-center bg-gray-100 bg-opacity-90 z-20 text-red-500"
    >
      <svg
        width="80"
        height="30"
        viewBox="0 0 120 30"
        xmlns="http://www.w3.org/2000/svg"
        fill="currentColor"
      >
        <circle cx="15" cy="15" r="15">
          <animate
            attributeName="r"
            from="15"
            to="15"
            begin="0s"
            dur="0.8s"
            values="15;9;15"
            calcMode="linear"
            repeatCount="indefinite"
          />
          <animate
            attributeName="fill-opacity"
            from="1"
            to="1"
            begin="0s"
            dur="0.8s"
            values="1;.5;1"
            calcMode="linear"
            repeatCount="indefinite"
          />
        </circle>
        <circle cx="60" cy="15" r="9" fill-opacity="0.3">
          <animate
            attributeName="r"
            from="9"
            to="9"
            begin="0s"
            dur="0.8s"
            values="9;15;9"
            calcMode="linear"
            repeatCount="indefinite"
          />
          <animate
            attributeName="fill-opacity"
            from="0.5"
            to="0.5"
            begin="0s"
            dur="0.8s"
            values=".5;1;.5"
            calcMode="linear"
            repeatCount="indefinite"
          />
        </circle>
        <circle cx="105" cy="15" r="15">
          <animate
            attributeName="r"
            from="15"
            to="15"
            begin="0s"
            dur="0.8s"
            values="15;9;15"
            calcMode="linear"
            repeatCount="indefinite"
          />
          <animate
            attributeName="fill-opacity"
            from="1"
            to="1"
            begin="0s"
            dur="0.8s"
            values="1;.5;1"
            calcMode="linear"
            repeatCount="indefinite"
          />
        </circle>
      </svg>
    </div>
  </transition>
</template>
<script>
export default {
  inheritAttrs: false,
  props: {
    value: {
      type: Boolean,
      required: true,
    },
  },
};
</script>