From 33edd2853ac1967f206bfe3ccc3f8774f89480a6 Mon Sep 17 00:00:00 2001
From: PintoGideon <gideonpinto123@gmail.com>
Date: Fri, 1 Nov 2024 15:01:25 -0400
Subject: [PATCH] feat: Add a loading spinner to Dcm Display

---
 src/components/Preview/displays/DcmDisplay.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Preview/displays/DcmDisplay.tsx b/src/components/Preview/displays/DcmDisplay.tsx
index 4c03c4ea8..9a24a99fb 100644
--- a/src/components/Preview/displays/DcmDisplay.tsx
+++ b/src/components/Preview/displays/DcmDisplay.tsx
@@ -5,8 +5,10 @@ import axios, { type AxiosProgressEvent } from "axios";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { type IFileBlob, getFileExtension } from "../../../api/model";
 import { notification } from "../../Antd";
+import { SpinContainer } from "../../Common";
 import useSize from "../../FeedTree/useSize";
 import type { ActionState } from "../FileDetailView";
+import { useDicomCache } from "./DicomCacheContext";
 import {
   events,
   type IStackViewport,
@@ -19,7 +21,6 @@ import {
   stopClip,
   stupidlyGetFileResourceUrl,
 } from "./dicomUtils/utils";
-import { useDicomCache } from "./DicomCacheContext";
 
 export type DcmImageProps = {
   selectedFile: IFileBlob;
@@ -487,6 +488,8 @@ const DcmDisplay = (props: DcmImageProps) => {
     }
   }, [actionState]);
 
+  const showProgress = downloadProgress > 0 && downloadProgress < 100;
+
   return (
     <>
       <div
@@ -524,10 +527,10 @@ const DcmDisplay = (props: DcmImageProps) => {
             </div>
           )}
         </div>
-
-        {downloadProgress > 0 && downloadProgress < 100 && (
-          <Progress percent={downloadProgress} />
+        {isLoading && !showProgress && (
+          <SpinContainer title="Loading Dicom Image..." />
         )}
+        {showProgress && <Progress percent={downloadProgress} />}
 
         {/* DICOM Image Display */}
         <div