Inertia - Vue - Laravel: show skeleton while retreiving data from the backend

One solution to this problem is to use a loading state in your component and conditionally render the skeleton or the actual data based on whether the data has been loaded or not. Here's an example:

1. In your child component, define a loading state:

<template>
  <div>
    <div v-if="loading"> <!-- show skeleton -->
      <Skeleton />
    </div>
    <div v-else> <!-- show actual data -->
      <h1>{{ data.title }}</h1>
      <p>{{ data.description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      data: null,
    };
  },
  mounted() {
    // fetch data from backend
    this.$inertia.get('/api/data').then((response) => {
      this.data = response.data;
      this.loading = false; // set loading state to false when data is loaded
    });
  },
};
</script>

1. In your Laravel controller, return a response with a delay to simulate a slow backend:

public function getData()
{
    sleep(2); // simulate a slow backend
    return response()->json([
        'title' => 'Some title',
        'description' => 'Some description',
    ]);
}

With this setup, the child component will show the skeleton while the data is being retrieved from the backend, and then show the actual data once it's loaded. You can adjust the delay in the Laravel controller to simulate a slower or faster backend.