From 4d78c6dadf3cc19d277429f7972595b8137a1c06 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Fri, 15 Mar 2024 09:08:56 +0100
Subject: [PATCH] feat: application overview loading state (#6562)

---
 .../application/ApplicationOverview.test.tsx  |  1 -
 .../application/ApplicationOverview.tsx       | 20 +++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/application/ApplicationOverview.test.tsx b/frontend/src/component/application/ApplicationOverview.test.tsx
index 8d3032c190..9e0f87fd93 100644
--- a/frontend/src/component/application/ApplicationOverview.test.tsx
+++ b/frontend/src/component/application/ApplicationOverview.test.tsx
@@ -75,7 +75,6 @@ test('Display application overview without environments', async () => {
         },
     );
 
-    await screen.findByText('my-app');
     await screen.findByText('No data available.');
 });
 
diff --git a/frontend/src/component/application/ApplicationOverview.tsx b/frontend/src/component/application/ApplicationOverview.tsx
index b38d41cdfc..d8972031b9 100644
--- a/frontend/src/component/application/ApplicationOverview.tsx
+++ b/frontend/src/component/application/ApplicationOverview.tsx
@@ -1,6 +1,13 @@
 import { usePageTitle } from 'hooks/usePageTitle';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert, Box, Button, Divider, styled } from '@mui/material';
+import {
+    Alert,
+    Box,
+    Button,
+    Divider,
+    LinearProgress,
+    styled,
+} from '@mui/material';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useApplicationOverview } from 'hooks/api/getters/useApplicationOverview/useApplicationOverview';
 import { ApplicationIssues } from './ApplicationIssues/ApplicationIssues';
@@ -9,7 +16,7 @@ import TopicOutlinedIcon from '@mui/icons-material/TopicOutlined';
 import { Badge } from '../common/Badge/Badge';
 import { useNavigate } from 'react-router-dom';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useFeedback } from '../feedbackNew/useFeedback';
 import ReviewsOutlined from '@mui/icons-material/ReviewsOutlined';
 
@@ -71,6 +78,15 @@ const ApplicationOverview = () => {
         });
     };
 
+    if (loading) {
+        return (
+            <div>
+                <p>Loading...</p>
+                <LinearProgress />
+            </div>
+        );
+    }
+
     return (
         <ConditionallyRender
             condition={!loading && data.environments.length === 0}