From 5af159cf4e9e1d679705344535f5d85522aeca93 Mon Sep 17 00:00:00 2001
From: Alex Johansson <alexander@n1s.se>
Date: Thu, 28 Oct 2021 17:12:30 +0100
Subject: [PATCH] fix loading flicker on `/bookings` (#1062)

---
 pages/bookings/[status].tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/pages/bookings/[status].tsx b/pages/bookings/[status].tsx
index bc7fd93096..fd237910b5 100644
--- a/pages/bookings/[status].tsx
+++ b/pages/bookings/[status].tsx
@@ -40,6 +40,8 @@ export default function Bookings() {
     }
   });
 
+  const isEmpty = !query.data?.pages[0]?.bookings.length;
+
   return (
     <Shell heading={t("bookings")} subtitle={t("bookings_description")}>
       <BookingsShell>
@@ -49,8 +51,8 @@ export default function Bookings() {
               {query.status === "error" && (
                 <Alert severity="error" title={t("something_went_wrong")} message={query.error.message} />
               )}
-              {query.status === "loading" || (query.status === "idle" && <Loader />)}
-              {query.status === "success" && query.data.pages[0].bookings.length > 0 && (
+              {(query.status === "loading" || query.status === "idle") && <Loader />}
+              {query.status === "success" && !isEmpty && (
                 <>
                   <div className="mt-6 overflow-hidden border border-b border-gray-200 rounded-sm">
                     <table className="min-w-full divide-y divide-gray-200">
@@ -75,7 +77,7 @@ export default function Bookings() {
                   </div>
                 </>
               )}
-              {query.status === "success" && query.data.pages[0].bookings.length === 0 && (
+              {query.status === "success" && isEmpty && (
                 <EmptyScreen
                   Icon={CalendarIcon}
                   headline={t("no_status_bookings_yet", { status: status })}