src/app/app.component.html

@defer {
  <paimon-layout>
    <router-outlet></router-outlet>
  </paimon-layout>
} @placeholder (minimum 200ms) {
  <div
    class="fixed left-0 top-0 flex h-screen w-screen flex-col items-center justify-center text-center"
  >
    <img
      priority="true"
      ngSrc="assets/icons/logo.svg"
      alt="Apache Paimon"
      width="186"
      height="39"
    />
    <div class="pt-8">
      <span
        class="animation-delay-0 m-2 inline-block h-[10px] w-[10px] animate-paimon-loading rounded-full bg-paimon-blue-primary align-middle"
      ></span>
      <span
        class="m-2 inline-block h-[10px] w-[10px] animate-paimon-loading rounded-full bg-paimon-blue-primary align-middle animation-delay-200"
      ></span>
      <span
        class="m-2 inline-block h-[10px] w-[10px] animate-paimon-loading rounded-full bg-paimon-blue-primary align-middle animation-delay-400"
      ></span>
      <span
        class="m-2 inline-block h-[10px] w-[10px] animate-paimon-loading rounded-full bg-paimon-blue-primary align-middle animation-delay-600"
      ></span>
      <span
        class="m-2 inline-block h-[10px] w-[10px] animate-paimon-loading rounded-full bg-paimon-blue-primary align-middle animation-delay-800"
      ></span>
      <span
        class="m-2 inline-block h-[10px] w-[10px] animate-paimon-loading rounded-full bg-paimon-blue-primary align-middle animation-delay-1000"
      ></span>
    </div>
  </div>
}