From 4cdb1ed0c0daa7f1076ceaedfe0396fce8921db8 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 21 Apr 2024 14:38:01 +0100
Subject: [PATCH] tweak location display logic

---
 src/components/Location/Location.tsx | 55 +++++++++++++++-------------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/components/Location/Location.tsx b/src/components/Location/Location.tsx
index 035a949..09cad58 100644
--- a/src/components/Location/Location.tsx
+++ b/src/components/Location/Location.tsx
@@ -42,33 +42,36 @@ export default function Location() {
 
   return (
     <div className={styles.wrapper}>
-      {!isPending && location?.now?.city ? (
+      {!isPending ? (
         <Animation>
-          <Flag
-            country={{
-              code: location.now.country_code,
-              name: location.now.country
-            }}
-          />
-          {location.now.city} <span>Now</span>
-          <div className={styles.next}>
-            {location?.next?.city && (
-              <>
-                {isDifferentCountry && (
-                  <Flag
-                    country={{
-                      code: location.next.country_code,
-                      name: location.next.country
-                    }}
-                  />
-                )}
-                {location.next.city}{' '}
-                <span>
-                  {relativeTime.from(new Date(location.next.date_start))}
-                </span>
-              </>
-            )}
-          </div>
+          {location?.now?.city ? (
+            <>
+              <Flag
+                country={{
+                  code: location.now.country_code,
+                  name: location.now.country
+                }}
+              />
+              {location.now.city} <span>Now</span>
+            </>
+          ) : null}
+
+          {location?.next?.city && (
+            <div className={styles.next}>
+              {isDifferentCountry && (
+                <Flag
+                  country={{
+                    code: location.next.country_code,
+                    name: location.next.country
+                  }}
+                />
+              )}
+              {location.next.city}{' '}
+              <span>
+                {relativeTime.from(new Date(location.next.date_start))}
+              </span>
+            </div>
+          )}
         </Animation>
       ) : null}
     </div>