Website loader with full css animated square loader

WebsiteLoader.js

import { useState, useEffect } from 'react';
import styled, { keyframes } from 'styled-components';

const Root = styled.div`
  position: relative;
  min-height: 100vh;
`;

const LoaderAnim = keyframes`
  to {
    transform: translate(-50%, -50%) rotateX(0deg);
  }

  from {
    transform: translate(-50%, -50%) rotateX(180deg);
  }
`;

const Loader = styled.div`
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

  .loader-wrapper {
    width: 100%;
    height: 100vh;
    perspective: 100px;
  }

  .cube-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -50px;
  }

  .cube {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: ${props => props.theme.colors.grey.v300};
    animation: ${LoaderAnim} 1.2s cubic-bezier(0.87, 0, 0.13, 1) infinite;
  }
`;

const WebsiteLoader = ({ url }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    const fetchWebsite = async () => {
      try {
        const response = await fetch(url);
        const html = await response.text();
        setHtmlContent(html);
        setIsLoading(false);
      } catch (error) {
        console.error('Error fetching website:', error);
      }
    };

    fetchWebsite();
  }, [url]);

  return (
    <Root>
      {isLoading ? (
        <Loader>
          <div className="loader-wrapper">
            <div className="cube-wrapper">
              <div className="cube" />
            </div>
          </div>
        </Loader>
      ) : (
        <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
      )}
    </Root>
  );
};

export default WebsiteLoader;