From 0406d6d5ee3eae93023050b01773d0ab5c781210 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <49837342+ajnart@users.noreply.github.com>
Date: Thu, 7 Jul 2022 07:13:11 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20skeleton=20while=20the=20meto?=
 =?UTF-8?q?=20module=20is=20loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modules/weather/WeatherModule.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/modules/weather/WeatherModule.tsx b/src/components/modules/weather/WeatherModule.tsx
index 8a6f6c98f..36393c677 100644
--- a/src/components/modules/weather/WeatherModule.tsx
+++ b/src/components/modules/weather/WeatherModule.tsx
@@ -1,4 +1,4 @@
-import { Group, Space, Title, Tooltip } from '@mantine/core';
+import { Group, Space, Title, Tooltip, Skeleton } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import {
@@ -157,7 +157,18 @@ export default function WeatherComponent(props: any) {
       });
   }, [cityInput]);
   if (!weather.current_weather) {
-    return null;
+        return (
+      <>
+        <Skeleton height={40} width={100} mb="xl" />
+        <Group noWrap direction="row">
+          <Skeleton height={50} circle />
+          <Group>
+            <Skeleton height={25} width={70} mr="lg" />
+            <Skeleton height={25} width={70} />
+          </Group>
+        </Group>
+      </>
+    );
   }
   function usePerferedUnit(value: number): string {
     return isFahrenheit ? `${(value * (9 / 5) + 32).toFixed(1)}°F` : `${value.toFixed(1)}°C`;