<script setup lang="ts">
import { Suspense } from 'vue'
import { getSettingsAsyncComponent } from '@/helper'

const AdminSettings = getSettingsAsyncComponent('AdminSettings.vue')
</script>

<template>
  <Suspense>
    <AdminSettings />
    <template #fallback>
      <div class="stwlite-tw-p-4 stwlite-tw-w-full mx-auto">
        <div class="stwlite-tw-animate-pulse stwlite-tw-flex stwlite-tw-space-x-4">
          <div class="stwlite-tw-flex-1 stwlite-tw-space-y-6 stwlite-tw-py-1">
            <div class="stwlite-tw-h-2 stwlite-tw-bg-slate-700 stwlite-tw-rounded"></div>
            <div class="stwlite-tw-space-y-3">
              <div class="stwlite-tw-grid stwlite-tw-grid-cols-3 stwlite-tw-gap-4">
                <div class="stwlite-tw-h-2 stwlite-tw-bg-slate-700 stwlite-tw-rounded stwlite-tw-col-span-2"></div>
                <div class="stwlite-tw-h-2 stwlite-tw-bg-slate-700 stwlite-tw-rounded stwlite-tw-col-span-1"></div>
              </div>
              <div class="stwlite-tw-h-2 stwlite-tw-bg-slate-700 stwlite-tw-rounded"></div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </Suspense>
</template>
