Loading

import { useState } from 'react';
import Switcher from '@/components/ui/Switcher';
import Alert from '@/components/ui/Alert';
import Loading from '@/components/composites/Loading';

export default function CoverDemo() {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <div>
      <div className="flex items-center mb-4 gap-2">
        <span>Loading State: </span>
        <Switcher
          checked={isLoading}
          onChange={(checked) => setIsLoading(checked)}
        />
      </div>
      <Loading loading={isLoading} type="cover">
        <Alert showIcon variant="info" title="Alert!">
          Additional description and information about copywriting.
        </Alert>
      </Loading>
    </div>
  );
}

import { useState } from 'react';
import Switcher from '@/components/ui/Switcher';
import Loading from '@/components/composites/Loading';

export default function CustomDemo() {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <div>
      <style>{`
        @keyframes nui-loading-fade {
          0% { opacity: 1; }
          100% { opacity: 0.15; }
        }
      `}</style>
      <div className="flex items-center mb-8 gap-2">
        <span>Loading State: </span>
        <Switcher
          checked={isLoading}
          onChange={(checked) => setIsLoading(checked)}
        />
      </div>
      <Loading
        loading={isLoading}
        className="flex items-center justify-center"
        customLoader={
          <span
            role="status"
            className="box-border inline-block size-8"
          >
            <span
              aria-hidden="true"
              className="relative left-1/2 top-1/2 block size-full -translate-x-1/2 -translate-y-1/2"
            >
              {Array.from({ length: 12 }, (_, index) => (
                <span
                  key={index}
                  className="absolute left-[-10%] top-[-3.9%] block h-[8%] w-[24%] rounded-full bg-current"
                  style={{
                    transform: `rotate(${index * 30}deg) translate(146%)`,
                    animationName: 'nui-loading-fade',
                    animationDuration: '1.2s',
                    animationTimingFunction: 'linear',
                    animationIterationCount: 'infinite',
                    animationDelay: `calc(var(--duration, 1.2s) / 12 * ${index - 12})`,
                  }}
                />
              ))}
            </span>
            <span className="sr-only">Loading</span>
          </span>
        }
      >
        <div className="text-center">Finish loading</div>
      </Loading>
    </div>
  );
}