From 2c07eb47d8ff5b9396de2d8d168e2417938a21d4 Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Thu, 16 Oct 2025 10:16:37 +0200
Subject: [PATCH 1/3] feat:
 show-card-loading-state-and-prevent-opening-until-data-arrives

---
 frontend/web/components/AppLoader.js          | 16 ------------
 frontend/web/components/AppLoader.tsx         | 26 +++++++++++++++++++
 .../base/accordion/AccordionCard.tsx          |  9 +++++--
 .../metrics/EnvironmentMetricsList.tsx        |  8 ++----
 frontend/web/project/project-components.js    |  7 ++---
 5 files changed, 39 insertions(+), 27 deletions(-)
 delete mode 100644 frontend/web/components/AppLoader.js
 create mode 100644 frontend/web/components/AppLoader.tsx

diff --git a/frontend/web/components/AppLoader.js b/frontend/web/components/AppLoader.js
deleted file mode 100644
index 353e848278ed..000000000000
--- a/frontend/web/components/AppLoader.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-
-export default function AppLoader() {
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        textAlign: 'center',
-        top: '35%',
-        width: '100%',
-      }}
-    >
-      <Loader />
-    </div>
-  )
-}
diff --git a/frontend/web/components/AppLoader.tsx b/frontend/web/components/AppLoader.tsx
new file mode 100644
index 000000000000..fc88acade909
--- /dev/null
+++ b/frontend/web/components/AppLoader.tsx
@@ -0,0 +1,26 @@
+import React, { FC } from 'react'
+
+interface AppLoaderProps {
+  style?: React.CSSProperties
+}
+
+const AppLoader: FC<AppLoaderProps> = ({ style }) => {
+  return (
+    <div
+      style={
+        style
+          ? style
+          : {
+              position: 'absolute',
+              textAlign: 'center',
+              top: '35%',
+              width: '100%',
+            }
+      }
+    >
+      <Loader />
+    </div>
+  )
+}
+
+export default AppLoader
diff --git a/frontend/web/components/base/accordion/AccordionCard.tsx b/frontend/web/components/base/accordion/AccordionCard.tsx
index 124023643f60..48f9b2bd9471 100644
--- a/frontend/web/components/base/accordion/AccordionCard.tsx
+++ b/frontend/web/components/base/accordion/AccordionCard.tsx
@@ -8,11 +8,13 @@ interface AccordionCardProps {
   title?: string
   className?: string
   defaultOpen?: boolean
+  isLoading?: boolean
 }
 
 const AccordionCard: FC<AccordionCardProps> = ({
   children,
   defaultOpen = false,
+  isLoading = false,
   title = 'Summary',
 }) => {
   const [open, setOpen] = useState(defaultOpen)
@@ -26,10 +28,13 @@ const AccordionCard: FC<AccordionCardProps> = ({
           display: 'flex',
           justifyContent: 'space-between',
         }}
-        onClick={() => setOpen(!open)}
+        onClick={isLoading ? undefined : () => setOpen(!open)}
         className='d-flex flex-row justify-content-between font-weight-medium'
       >
-        {title}
+        <div className='d-flex flex-row align-items-center gap-1'>
+          <div>{title}</div>{' '}
+          {isLoading && <Loader width='15px' height='15px' />}
+        </div>
         <IconButton size='small'>
           <IonIcon
             className='fs-small me-2 text-muted'
diff --git a/frontend/web/components/metrics/EnvironmentMetricsList.tsx b/frontend/web/components/metrics/EnvironmentMetricsList.tsx
index b1b9e8ba8bff..8c8ed24f3ed4 100644
--- a/frontend/web/components/metrics/EnvironmentMetricsList.tsx
+++ b/frontend/web/components/metrics/EnvironmentMetricsList.tsx
@@ -15,7 +15,7 @@ const EnvironmentMetricsList: FC<EnvironmentMetricsListProps> = ({
   forceRefetch,
   projectId,
 }) => {
-  const { data, refetch } = useGetEnvironmentMetricsQuery({
+  const { data, isLoading, refetch } = useGetEnvironmentMetricsQuery({
     id: environmentApiKey,
   })
 
@@ -30,13 +30,9 @@ const EnvironmentMetricsList: FC<EnvironmentMetricsListProps> = ({
     }
   }, [forceRefetch, refetch])
 
-  if (!data || data.metrics.length === 0) {
-    return null
-  }
-
   return (
     <div className='mb-3'>
-      <AccordionCard title='Summary'>
+      <AccordionCard title='Summary' isLoading={isLoading}>
         <div className='flex gap-2 mt-4'>
           <div
             className='metrics-grid'
diff --git a/frontend/web/project/project-components.js b/frontend/web/project/project-components.js
index fc980afb5751..59d76582c62a 100644
--- a/frontend/web/project/project-components.js
+++ b/frontend/web/project/project-components.js
@@ -47,6 +47,7 @@ window.Loader = class extends PureComponent {
   static displayName = 'Loader'
 
   render() {
+    const { fill = '#6633ff', height = '40px', width = '40px' } = this.props
     return (
       <svg
         className='loader'
@@ -54,13 +55,13 @@ window.Loader = class extends PureComponent {
         id='loader-1'
         x='0px'
         y='0px'
-        width='40px'
-        height='40px'
+        width={width}
+        height={height}
         viewBox='0 0 50 50'
         style={{ enableBackground: '0 0 50 50' }}
       >
         <path
-          fill='#6633ff'
+          fill={fill}
           d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'
         >
           <animateTransform

From 375b6325ad836cabef85a6942a09f560c72c122f Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Thu, 16 Oct 2025 10:20:39 +0200
Subject: [PATCH 2/3] feat: hide-chevron-when-loading

---
 .../components/base/accordion/AccordionCard.tsx  | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/web/components/base/accordion/AccordionCard.tsx b/frontend/web/components/base/accordion/AccordionCard.tsx
index 48f9b2bd9471..646320d31952 100644
--- a/frontend/web/components/base/accordion/AccordionCard.tsx
+++ b/frontend/web/components/base/accordion/AccordionCard.tsx
@@ -32,15 +32,17 @@ const AccordionCard: FC<AccordionCardProps> = ({
         className='d-flex flex-row justify-content-between font-weight-medium'
       >
         <div className='d-flex flex-row align-items-center gap-1'>
-          <div>{title}</div>{' '}
+          {title}
           {isLoading && <Loader width='15px' height='15px' />}
         </div>
-        <IconButton size='small'>
-          <IonIcon
-            className='fs-small me-2 text-muted'
-            icon={open ? chevronUp : chevronDown}
-          />
-        </IconButton>
+        {!isLoading && (
+          <IconButton size='small'>
+            <IonIcon
+              className='fs-small me-2 text-muted'
+              icon={open ? chevronUp : chevronDown}
+            />
+          </IconButton>
+        )}
       </div>
       <Collapse in={open}>
         <div className='mt-2 mb-2'>{children}</div>

From 24edb2acd9468531012da2ee2c276f3dc886940b Mon Sep 17 00:00:00 2001
From: wadii <wadii.zaim@flagsmith.com>
Date: Thu, 16 Oct 2025 10:23:41 +0200
Subject: [PATCH 3/3] feat: removed-unused-props-in-AppLoader

---
 frontend/web/components/AppLoader.tsx | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/frontend/web/components/AppLoader.tsx b/frontend/web/components/AppLoader.tsx
index fc88acade909..eff66251d48f 100644
--- a/frontend/web/components/AppLoader.tsx
+++ b/frontend/web/components/AppLoader.tsx
@@ -1,22 +1,14 @@
 import React, { FC } from 'react'
 
-interface AppLoaderProps {
-  style?: React.CSSProperties
-}
-
-const AppLoader: FC<AppLoaderProps> = ({ style }) => {
+const AppLoader: FC = () => {
   return (
     <div
-      style={
-        style
-          ? style
-          : {
-              position: 'absolute',
-              textAlign: 'center',
-              top: '35%',
-              width: '100%',
-            }
-      }
+      style={{
+        position: 'absolute',
+        textAlign: 'center',
+        top: '35%',
+        width: '100%',
+      }}
     >
       <Loader />
     </div>