bug: fix spinner component on safari

packages/client/src/components/CircularTile.tsx

@@ -1,18 +1,14 @@
-import { useMediaQuery } from '@/hooks/generic/useMediaQuery'
-
 interface CircularTileProps {
   className?: string
   rotation?: number
 }
 
 const CircularTile = ({ className, rotation }: CircularTileProps) => {
-  const isMediumOrLarger = useMediaQuery('(min-width: 768px)')
-  const viewBox = isMediumOrLarger ? '0 0 256 256' : '-80 -80 350 350'
   return (
     <svg
-      className={`fill-slate-100 ${className}`}
+      className={`aspect-square w-full fill-slate-100 ${className}`}
       style={{ transform: `rotate(${rotation}deg)` }}
-      viewBox={viewBox}
+      viewBox='0 0 256 256'
       xmlns='http://www.w3.org/2000/svg'
     >
       <path

packages/client/src/components/LoadingAnimation.tsx

@@ -1,16 +1,10 @@
 import { useEffect, useState } from 'react'
 import CircularTile from '@/components/CircularTile'
-import { useMediaQuery } from '@/hooks/generic/useMediaQuery'
 
 const LoadingAnimation = ({ className, isLoading }: { className?: string; isLoading: boolean }) => {
   const [rotations, setRotations] = useState([0, 0, 0, 0])
 
   // Determine if the screen width is medium or larger
-  const isMobile = useMediaQuery('(max-width: 767px)')
-  const isTablet = useMediaQuery(
-    '(min-width: 768px) and (max-device-width: 1180px), (min-device-width: 768px) and (max-device-width: 1180px)',
-  )
-  const isDesktop = useMediaQuery('(min-width: 1181px)')
 
   const getRandRotation = () => {
     const rand_index = Math.floor(Math.random() * 4)
@@ -32,12 +26,9 @@ const LoadingAnimation = ({ className, isLoading }: { className?: string; isLoad
     return () => clearInterval(interval)
   }, [rotations, isLoading])
 
-  // Adjust size based on screen width
-  const sizeClasses = isDesktop ? 'w-10 h-10' : isTablet ? 'w-5 h-5' : 'w-7 h-7'
-  const gapClasses = isDesktop ? 'gap-1' : isTablet ? 'gap-5 mr-4 mb-4' : 'gap-4 mr-4'
   return (
     <div className={`flex h-full items-center justify-center ${className}`}>
-      <div className={`grid grid-cols-2 ${gapClasses} ${sizeClasses}`}>
+      <div className={`grid h-10 w-10 grid-cols-2 gap-1`}>
         {rotations.map((rotation, i) => {
           return <CircularTile key={i} className='!fill-slate-600 duration-500 ease-in-out' rotation={rotation} />
         })}