From 2dfba0c7f6dbb78db1b29902b8a64ddad2ef62d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98rjan=20Aare=20J=C3=B8rgensen?= <oajo@equinor.com>
Date: Fri, 27 Dec 2024 12:56:49 +0100
Subject: [PATCH] fix: Add animated progress indicator to object- and variogram
 result pages

---
 .../Results/ObjectResult/ObjectResult.tsx       | 17 ++++++++++++++++-
 .../VariogramResults/VariogramResults.tsx       | 17 ++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

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 (
     <>