diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue
index 6f7aae4d..e5ea59e2 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue
@@ -1,5 +1,6 @@
 <template>
-  <div ref="viewport-fusion" class="viewport-wrapper" @mouseup="sliderMouseup" @mousemove="sliderMousemove"
+  <div ref="viewport-fusion" class="viewport-wrapper" v-loading="loading" element-loading-text="Loading..."
+    element-loading-background="rgba(0, 0, 0, 0.8)" @mouseup="sliderMouseup" @mousemove="sliderMousemove"
     @mouseleave="sliderMouseleave" :style="{ color: series.Modality === 'PT' || isMip ? '#666' : '#ddd' }">
     <div v-if="series && taskInfo" class="left-top-text">
       <div v-if="taskInfo.IsExistsClinicalData && !isMip && !isFusion" class="cd-info"
@@ -185,6 +186,7 @@ export default {
         isMove: false
       },
       ptVolumeId: null,
+      loading: false
     }
   },
   mounted() {
@@ -501,10 +503,12 @@ export default {
       }
     },
     async createImageIdsAndCacheMetaData(obj) {
+      this.loading = true
       await createImageIdsAndCacheMetaData({
         modality: obj.Modality,
         imageIds: obj.ImageIds
       })
+      this.loading = false
     },
     async setSeriesInfo(obj, option = {}) {
       try {
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue
index 4f5d0c81..4d93b6f7 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/Viewport.vue
@@ -2,6 +2,9 @@
   <div
     ref="viewport"
     class="viewport-wrapper"
+    v-loading="loading"
+    element-loading-text="Loading..."
+    element-loading-background="rgba(0, 0, 0, 0.8)"
     @mouseup="sliderMouseup"
     @mousemove="sliderMousemove"
     @mouseleave="sliderMouseleave"
@@ -166,7 +169,8 @@ export default {
       originalMarkers: [],
       markers: { top: '', right: '', bottom: '', left: '' },
       playClipState: false,
-      wwwcIdx: 2
+      wwwcIdx: 2,
+      loading: false
     }
   },
   mounted() {
@@ -404,7 +408,9 @@ export default {
         const renderingEngine = getRenderingEngine(this.renderingEngineId)
         const viewport = renderingEngine.getViewport(this.viewportId)
         let imageId = obj.ImageIds[obj.SliceIndex] ? obj.ImageIds[obj.SliceIndex] : obj.ImageIds[0]
+        this.loading = true
         const image = await cornerstoneDICOMImageLoader.wadouri.loadImage(imageId).promise
+        this.loading = false
         if (obj.Modality === 'PT') {
           this.cachePTMetadata([image])
         }