feat: Add a loading spinner to Dcm Display

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