fix initial load

pages/index.js

@@ -6,6 +6,7 @@ export default function Home() {
   const [input, setInput] = useState("mumbai");
   const [systemUsed, setSystemUsed] = useState("metric");
   const [weatherData, setWeatherData] = useState();
+  // const [isLoading, setIsLoading] = useState(true);
 
   const getData = async () => {
     const res = await fetch("/api/data", {
@@ -100,9 +101,8 @@ export default function Home() {
     "Saturday",
   ];
 
-  return (
+  return weatherData ? (
     <div className={styles.wrapper}>
-      {weatherData && (
       <div className={styles.weatherWrapper}>
         <h1 className={styles.locationTitle}>
           {weatherData.name}, {weatherData.sys.country}
@@ -132,10 +132,9 @@ export default function Home() {
           °{systemUsed == "metric" ? "C" : "F"}
         </p>
       </div>
-      )}
+
       <div className={styles.statsWrapper}>
         <div className={styles.titleAndSearch}>
-          {weatherData && (
           <h2 style={{ textAlign: "left" }}>
             {
               weekday[
@@ -157,7 +156,7 @@ export default function Home() {
               ? isPM(convertTime(weatherData.dt, weatherData.timezone)[0])
               : ""}
           </h2>
-          )}
+
           <input
             type="text"
             className={styles.searchInput}
@@ -168,7 +167,6 @@ export default function Home() {
           />
         </div>
 
-        {weatherData && (
         <div className={styles.statsBox}>
           <div className={styles.statsCard}>
             <p>Humidity</p>
@@ -310,10 +308,12 @@ export default function Home() {
             </div>
           </div>
         </div>
-        )}
+
         <p onClick={changeSystem}>Metric System</p>
         <p onClick={changeSystem}>Imperial System</p>
       </div>
     </div>
+  ) : (
+    <h1>Loading results</h1>
   );
 }

styles/Home.module.css

@@ -11,6 +11,10 @@
   margin: 0 20px;
 }
 
+.wrapperHide {
+  display: none;
+}
+
 .weatherWrapper {
   padding: 30px;
 }