From 6cdbec8e753b4a05a5be0cd7c07edbca7f17481c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= <k.grueneberg1994@gmail.com>
Date: Tue, 6 Jun 2023 13:50:05 +0200
Subject: [PATCH] fix usage billing initial loading state

---
 .../interfaces/BillingV2/Subscription/BillingBreakdown.tsx    | 2 +-
 studio/components/interfaces/BillingV2/Usage/Usage.tsx        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/studio/components/interfaces/BillingV2/Subscription/BillingBreakdown.tsx b/studio/components/interfaces/BillingV2/Subscription/BillingBreakdown.tsx
index 1ae114d3079..eb53e89ba8b 100644
--- a/studio/components/interfaces/BillingV2/Subscription/BillingBreakdown.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/BillingBreakdown.tsx
@@ -45,7 +45,7 @@ const BillingBreakdown = ({}: BillingBreakdownProps) => {
   const totalUsageFees = usageFees.reduce((a, b) => a + b.amount, 0)
 
   const hasExceededAnyLimits =
-    !isUsageBillingEnabled &&
+    isUsageBillingEnabled === false &&
     Object.values(usage ?? {})
       .map((metric) => {
         if (typeof metric !== 'object') return false
diff --git a/studio/components/interfaces/BillingV2/Usage/Usage.tsx b/studio/components/interfaces/BillingV2/Usage/Usage.tsx
index cad0bf057fa..fe825f007de 100644
--- a/studio/components/interfaces/BillingV2/Usage/Usage.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/Usage.tsx
@@ -210,9 +210,9 @@ const Usage = () => {
                         : 'opacity-50'
                     )}
                   >
-                    {!usageBillingEnabled && status === USAGE_STATUS.APPROACHING ? (
+                    {usageBillingEnabled === false && status === USAGE_STATUS.APPROACHING ? (
                       <IconAlertCircle size={15} strokeWidth={2} className="text-amber-900" />
-                    ) : !usageBillingEnabled && status === USAGE_STATUS.EXCEEDED ? (
+                    ) : usageBillingEnabled === false && status === USAGE_STATUS.EXCEEDED ? (
                       <IconAlertCircle size={15} strokeWidth={2} className="text-red-900" />
                     ) : null}
                     <p className="text-sm">{category.name}</p>