import { RootPortal, View } from '@tarojs/components';
import { useStatusState } from './contexts/status';
import { stopEvent } from './tools/stop-event';

export function Loading() {
  const status = useStatusState();

  if (status !== 'loading') {
    return null;
  }

  return (
    <RootPortal enable>
      <View
        className="fixed top-0 left-0 h-full w-full bg-black/30 z-[999] flex items-center justify-center animated__fade-in"
        catchMove
        onTouchMove={stopEvent}
      >
        <View className="h-12 w-12 border-4 border-primary border-r-transparent rounded-full animate-spin"></View>
      </View>
    </RootPortal>
  );
}