<template>
  <v-container>
    <div class="text-center mb-12">
      <v-btn
        size="x-large"
        @click="loading = !loading"
      >
        Toggle Loading
      </v-btn>
    </div>

    <v-row class="justify-center">
      <v-col
        class="mb-12"
        cols="12"
        md="6"
      >
        <div class="text-headline-small text-center">
          Using slot
        </div>

        <v-skeleton-loader
          :loading="loading"
          type="list-item-two-line"
        >
          <v-list-item
            lines="two"
            subtitle="Subtitle"
            title="Title"
            rounded
          ></v-list-item>
        </v-skeleton-loader>
      </v-col>

      <v-col
        cols="12"
        md="6"
      >
        <div class="text-headline-small text-center">
          Using if
        </div>

        <v-skeleton-loader
          v-if="loading"
          type="list-item-two-line"
        ></v-skeleton-loader>

        <v-list-item
          v-else
          lines="two"
          subtitle="Subtitle"
          title="Title"
          rounded
        ></v-list-item>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
  import { ref } from 'vue'

  const loading = ref(true)
</script>

<script>
  export default {
    data: () => ({
      loading: true,
    }),
  }
</script>
