From 81a81b7e31d7702671e712073746c1c697f8b5d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98rjan=20Aare=20J=C3=B8rgensen?= <oajo@equinor.com>
Date: Thu, 2 Jan 2025 11:28:16 +0100
Subject: [PATCH] fix: Loading indicator on object and variogram result (#422)

* fix: Add animated progress indicator to object- and variogram result pages

* fix: Housekeeping (adjust HTML landmarks, correct a typo, set model page to full height)
---
 src/App.styled.tsx                              |  2 +-
 .../HandleModel/SidePane/SidePane.styled.ts     |  4 ++--
 src/pages/AddModel/AddModel.styled.tsx          |  2 +-
 src/pages/Browse/Browse.styled.tsx              |  2 +-
 src/pages/ModelPages/Model/Model.styled.tsx     |  7 +++++--
 src/pages/ModelPages/Model/Model.tsx            |  2 +-
 .../Results/ObjectResult/ObjectResult.tsx       | 17 ++++++++++++++++-
 .../VariogramResults/VariogramResults.tsx       | 17 ++++++++++++++++-
 8 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/App.styled.tsx b/src/App.styled.tsx
index 00e9ea8..37529a1 100644
--- a/src/App.styled.tsx
+++ b/src/App.styled.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const StyledOutletWrapper = styled.section`
+const StyledOutletWrapper = styled.div`
   height: calc(100% - 128px);
   overflow: auto;
 `;
diff --git a/src/features/HandleModel/SidePane/SidePane.styled.ts b/src/features/HandleModel/SidePane/SidePane.styled.ts
index 204b37f..a7f8cb1 100644
--- a/src/features/HandleModel/SidePane/SidePane.styled.ts
+++ b/src/features/HandleModel/SidePane/SidePane.styled.ts
@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import { spacings } from '../../../tokens/spacings';
 import { theme } from '../../../tokens/theme';
 
-export const SidebarWrapper = styled.div`
-  heigth: 100%;
+export const SidebarWrapper = styled.aside`
+  height: 100%;
   max-width: 256px;
 `;
 
diff --git a/src/pages/AddModel/AddModel.styled.tsx b/src/pages/AddModel/AddModel.styled.tsx
index 018bad4..36810bd 100644
--- a/src/pages/AddModel/AddModel.styled.tsx
+++ b/src/pages/AddModel/AddModel.styled.tsx
@@ -8,7 +8,7 @@ export const PageLayout = styled.div`
   height: 100%;
 `;
 
-export const Content = styled.div`
+export const Content = styled.main`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
diff --git a/src/pages/Browse/Browse.styled.tsx b/src/pages/Browse/Browse.styled.tsx
index bbac7c9..f9e6903 100644
--- a/src/pages/Browse/Browse.styled.tsx
+++ b/src/pages/Browse/Browse.styled.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { spacings } from '../../tokens/spacings';
 
-export const BrowseWrapper = styled.div`
+export const BrowseWrapper = styled.main`
   column-gap: ${spacings.X_LARGE};
   padding: ${spacings.XXX_LARGE} ${spacings.X_LARGE} ${spacings.X_LARGE};
 
diff --git a/src/pages/ModelPages/Model/Model.styled.tsx b/src/pages/ModelPages/Model/Model.styled.tsx
index af08416..4a55e58 100644
--- a/src/pages/ModelPages/Model/Model.styled.tsx
+++ b/src/pages/ModelPages/Model/Model.styled.tsx
@@ -20,12 +20,15 @@ export const Wrapper = styled.div`
   display: grid;
   grid-template-areas: 'sidebar content';
   grid-template-columns: 16rem 1fr;
+  height: 100%;
 `;
 
-export const ContentWrapper = styled.div`
+export const ContentWrapper = styled.main`
   grid-area: content;
+  display: flex;
+  flex-flow: column nowrap;
 `;
 
-export const SidebarWrapper = styled.div`
+export const SidebarWrapper = styled.aside`
   grid-area: sidebar;
 `;
diff --git a/src/pages/ModelPages/Model/Model.tsx b/src/pages/ModelPages/Model/Model.tsx
index ab7355b..7e105c2 100644
--- a/src/pages/ModelPages/Model/Model.tsx
+++ b/src/pages/ModelPages/Model/Model.tsx
@@ -132,7 +132,7 @@ export const Model = () => {
             size={24}
             value={100}
             variant="indeterminate"
-          />{' '}
+          />
           <Typography variant="body_short">Loading, please wait…</Typography>
         </div>
       </Styled.EmptyPage>
diff --git a/src/pages/ModelPages/Results/ObjectResult/ObjectResult.tsx b/src/pages/ModelPages/Results/ObjectResult/ObjectResult.tsx
index 2aa4fe5..145852f 100644
--- a/src/pages/ModelPages/Results/ObjectResult/ObjectResult.tsx
+++ b/src/pages/ModelPages/Results/ObjectResult/ObjectResult.tsx
@@ -3,6 +3,8 @@ import { NoResults } from '../../../../features/Results/NoResults/NoResults';
 import { useFetchObjectResults } from '../../../../hooks/useFetchChannelResults';
 import { usePepmContextStore } from '../../../../hooks/GlobalState';
 import { useEffect } from 'react';
+import { CircularProgress, Typography } from '@equinor/eds-core-react';
+import * as Styled from '../../Model/Model.styled';
 
 export const ObjectResult = () => {
   const { computeCases, objectResults, setObjectEstimationResults } =
@@ -13,7 +15,20 @@ export const ObjectResult = () => {
     if (data) setObjectEstimationResults(data.data);
   }, [data, setObjectEstimationResults]);
 
-  if (isLoading) return <>Loading ...</>;
+  if (isLoading)
+    return (
+      <Styled.EmptyPage>
+        <div className="loading">
+          <CircularProgress
+            color="primary"
+            size={24}
+            value={100}
+            variant="indeterminate"
+          />
+          <Typography variant="body_short">Loading, please wait…</Typography>
+        </div>
+      </Styled.EmptyPage>
+    );
 
   return (
     <>
diff --git a/src/pages/ModelPages/Results/VariogramResults/VariogramResults.tsx b/src/pages/ModelPages/Results/VariogramResults/VariogramResults.tsx
index 2e447b8..4fde05e 100644
--- a/src/pages/ModelPages/Results/VariogramResults/VariogramResults.tsx
+++ b/src/pages/ModelPages/Results/VariogramResults/VariogramResults.tsx
@@ -3,6 +3,8 @@ import { CaseResultView } from '../../../../features/Results/CaseResult/CaseResu
 import { NoResults } from '../../../../features/Results/NoResults/NoResults';
 import { usePepmContextStore } from '../../../../hooks/GlobalState';
 import { useFetchVariogramResults } from '../../../../hooks/useFetchVariogramResults';
+import { CircularProgress, Typography } from '@equinor/eds-core-react';
+import * as Styled from '../../Model/Model.styled';
 
 export const VariogramResults = () => {
   const { data, isLoading } = useFetchVariogramResults();
@@ -13,7 +15,20 @@ export const VariogramResults = () => {
     if (data) setVariogramResults(data.data);
   }, [data, setVariogramResults]);
 
-  if (isLoading) return <>Loading ...</>;
+  if (isLoading)
+    return (
+      <Styled.EmptyPage>
+        <div className="loading">
+          <CircularProgress
+            color="primary"
+            size={24}
+            value={100}
+            variant="indeterminate"
+          />
+          <Typography variant="body_short">Loading, please wait…</Typography>
+        </div>
+      </Styled.EmptyPage>
+    );
 
   return (
     <>