feat: show-card-loading-state-and-prevent-opening-until-data-arrives (#6165)

Author: Zaimwa9

frontend/web/components/AppLoader.js frontend/web/components/AppLoader.tsxfrontend/web/components/AppLoader.js renamed to frontend/web/components/AppLoader.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { FC } from 'react'
 
-export default function AppLoader() {
+const AppLoader: FC = () => {
   return (
     <div
       style={{
@@ -14,3 +14,5 @@ export default function AppLoader() {
     </div>
   )
 }
+
+export default AppLoader

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,16 +28,21 @@ 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}
-        <IconButton size='small'>
-          <IonIcon
-            className='fs-small me-2 text-muted'
-            icon={open ? chevronUp : chevronDown}
-          />
-        </IconButton>
+        <div className='d-flex flex-row align-items-center gap-1'>
+          {title}
+          {isLoading && <Loader width='15px' height='15px' />}
+        </div>
+        {!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>

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'

frontend/web/project/project-components.js

@@ -47,20 +47,21 @@ window.Loader = class extends PureComponent {
   static displayName = 'Loader'
 
   render() {
+    const { fill = '#6633ff', height = '40px', width = '40px' } = this.props
     return (
       <svg
         className='loader'
         version='1.1'
         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