Fixed layouts

ui/src/components/Metars/index.tsx

@@ -1,14 +1,11 @@
 import { Metar } from '@/api/metar.types';
+import { Skeleton } from '@mantine/core';
 import dynamic from 'next/dynamic';
 
 export default async function Metar() {
   const Map = dynamic(() => import('@/components/Metars/MetarMap'), {
     loading: () => (
-      <div className='grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8'>
-        <div className='text-center'>
-          <p className='mt-4 text-3xl font-bold tracking-tight text-gray-300 sm:text-5xl'>Loading...</p>
-        </div>
-      </div>
+      <Skeleton className='map-container' />
     ),
     ssr: false
   });