postdown/islands/Loading.tsx

import { useEffect, useState } from "preact/hooks";

interface LoadingGlobalHook {
  show: () => void;
  hide: () => void;
}

declare global {
  var $loading: LoadingGlobalHook | undefined;
}

export default function Loading() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    globalThis.$loading = {
      show: () => setVisible(true),
      hide: () => setVisible(false),
    };

    return () => {
      delete globalThis.$loading;
    };
  }, []);

  return (
    <div
      className={`fixed inset-0 bg-black/60 z-[9] flex items-center justify-center ${
        visible ? "" : "hidden"
      }`}
    >
      <div className="inline-block transform translate-z-[1px]">
        <div className="inline-block w-16 h-16 m-2 rounded-full bg-white dark:bg-gray-200 animate-[pd-loading-spin_5s_cubic-bezier(0,0.2,0.8,1)_infinite]" />
      </div>
    </div>
  );
}