diff --git a/.gitignore b/.gitignore
index c640529..66906cc 100644
Binary files a/.gitignore and b/.gitignore differ
diff --git a/client/src/components/Dragger.js b/client/src/components/Dragger.js
index 60f1b3d..9e66445 100644
--- a/client/src/components/Dragger.js
+++ b/client/src/components/Dragger.js
@@ -8,9 +8,9 @@ import UTIF from 'utif'
 
 const path = require('path')
 
-export function Dragger () {
+export function Dragger() {
   const context = useContext(AppContext)
-
+  const [uploading, setUploading] = useState(false)
   // const getBase64 = (file) =>
   //   new Promise((resolve, reject) => {
   //     const reader = new FileReader()
@@ -21,6 +21,7 @@ export function Dragger () {
 
   const onChange = (info) => {
     const { status } = info.file
+    console.log("onChange called with file status:", status); //LI
     if (status === 'done') {
       console.log('file found at:', info.file.originFileObj.path)
 
@@ -58,6 +59,7 @@ export function Dragger () {
   const [previewFileFolderPath, setPreviewFileFolderPath] = useState('')
   const [fileType, setFileType] = useState('Image')
 
+
   const handleText = (event) => {
     setValue(event.target.value)
   }
@@ -153,11 +155,15 @@ export function Dragger () {
           console.error('TIFF image has invalid dimensions:', { width, height })
           message.error('TIFF image has invalid dimensions.')
           setPreviewImage(DEFAULT_IMAGE) // Fallback to default image
+          context.setLoading(false)
+          console.log("Current loading state1:", context.loading);
         }
       } catch (error) {
         console.error('Failed to generate TIFF preview:', error)
         message.error('Failed to generate TIFF preview.')
         setPreviewImage(DEFAULT_IMAGE) // Fallback to default image
+        context.setLoading(false)
+        console.log("Current loading state2:", context.loading);
       }
     }
     reader.readAsArrayBuffer(file)
@@ -165,6 +171,8 @@ export function Dragger () {
 
   // When click preview eye icon, implement handlePreview function
   const handlePreview = async (file) => {
+    context.setLoading(true);
+    console.log("Current loading state3:", context.loading);
     setFileUID(file.uid)
     setPreviewOpen(true)
     setPreviewImage(file.thumbUrl)
@@ -180,6 +188,21 @@ export function Dragger () {
       // Directory name with trailing slash
       setPreviewFileFolderPath(path.dirname(file.originFileObj.path) + '/')
     }
+    //setPreviewOpen(true)
+    //setPreviewImage(file.thumbUrl)
+    console.log("File type:", file.type);
+
+    if (file.type === 'image/tiff' || file.type === 'image/tif'
+      || file.type.includes("tiff") || file.type.includes("tif")) {
+      generateTiffPreview(file, (dataURL) => {
+        setPreviewImage(dataURL)
+        context.setLoading(false) // LI(tiff files)
+        console.log("Current loading state4:", context.loading);
+      })
+    } else {
+      context.setLoading(false) // LI(other types of files)
+      console.log("Current loading state5:", context.loading);
+    }
   }
 
   // Solved the "clear the cache" button for image loading is not reachable when the image preview files are loaded.
@@ -270,7 +293,7 @@ export function Dragger () {
             style={{
               width: '100%'
             }}
-            src={previewImage}
+            src={previewImage || DEFAULT_IMAGE}
           />
         </Space>
       </Modal>
diff --git a/client/src/components/LoadingIndicator.css b/client/src/components/LoadingIndicator.css
new file mode 100644
index 0000000..f864187
--- /dev/null
+++ b/client/src/components/LoadingIndicator.css
@@ -0,0 +1,22 @@
+.loading-indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 1000;
+}
+
+/*
+.loading-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+}
+*/
\ No newline at end of file
diff --git a/client/src/components/LoadingIndicator.js b/client/src/components/LoadingIndicator.js
new file mode 100644
index 0000000..ec315e6
--- /dev/null
+++ b/client/src/components/LoadingIndicator.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Spin } from 'antd';
+import './LoadingIndicator.css';
+
+const LoadingIndicator = () => {
+  return (
+    <div className="loading-indicator">
+      <Spin size="large" tip="Loading..." />
+    </div>
+  );
+};
+
+export default LoadingIndicator;
diff --git a/client/src/contexts/GlobalContext.js b/client/src/contexts/GlobalContext.js
index 022feed..c7890d3 100644
--- a/client/src/contexts/GlobalContext.js
+++ b/client/src/contexts/GlobalContext.js
@@ -4,7 +4,7 @@ import localforage from 'localforage'
 export const AppContext = createContext(null)
 
 // Solve delete button error issue
-function usePersistedState (key, defaultValue) {
+function usePersistedState(key, defaultValue) {
   const [state, setState] = useState(defaultValue)
   const [isLoaded, setIsLoaded] = useState(false)
 
@@ -59,6 +59,7 @@ export const ContextWrapper = (props) => {
   const [inputLabel, setInputLabel] = usePersistedState('inputLabel', null)
   const [viewer, setViewer] = usePersistedState('viewer', null)
   const [tensorBoardURL, setTensorBoardURL] = usePersistedState('tensorBoardURL', null)
+  const [loading, setLoading] = useState(false)
 
   return (
     <AppContext.Provider
@@ -94,7 +95,9 @@ export const ContextWrapper = (props) => {
         checkpointPath,
         setCheckpointPath,
         tensorBoardURL,
-        setTensorBoardURL
+        setTensorBoardURL,
+        loading,
+        setLoading
       }}
     >
       {props.children}
diff --git a/client/src/views/DataLoader.js b/client/src/views/DataLoader.js
index b75c89d..19b4f5f 100644
--- a/client/src/views/DataLoader.js
+++ b/client/src/views/DataLoader.js
@@ -3,11 +3,12 @@ import { Dragger } from '../components/Dragger'
 import { Button, Input, Select, Space, Typography } from 'antd'
 import { ArrowRightOutlined } from '@ant-design/icons'
 import { AppContext } from '../contexts/GlobalContext'
+import LoadingIndicator from '../components/LoadingIndicator'
 import './DataLoader.css'
 
 const { Title } = Typography
 
-function DataLoader (props) {
+function DataLoader(props) {
   const context = useContext(AppContext)
   const [currentImage, setCurrentImage] = useState(null)
   const [currentLabel, setCurrentLabel] = useState(null)
@@ -16,13 +17,24 @@ function DataLoader (props) {
 
   const handleVisualizeButtonClick = async (event) => {
     event.preventDefault()
-    context.setCurrentImage(currentImage)
-    context.setCurrentLabel(currentLabel)
-    fetchNeuroglancerViewer(
+    context.setLoading(true)
+    console.log("Current loading state6:", context.loading);
+    console.log("Loading set to true");
+    //context.setCurrentImage(currentImage)
+    //context.setCurrentLabel(currentLabel)
+    setCurrentImage(currentImage);
+    setCurrentLabel(currentLabel);
+    await fetchNeuroglancerViewer(
       currentImage,
       currentLabel,
       scales.split(',').map(Number)
     )
+    /*setTimeout(() => {               //LI
+      context.setLoading(false);
+    }, 2000);*/
+    context.setLoading(false);
+    console.log("Loading set to false");
+    console.log("Current loading state7:", context.loading);
   }
   const handleImageChange = (value) => {
     console.log(`selected ${value}`)
@@ -56,6 +68,7 @@ function DataLoader (props) {
       align='start'
       style={{ margin: '7px', display: 'flex' }}
     >
+      {context.loading && <LoadingIndicator />}
       <Dragger />
       <Title level={5} style={{ marginBottom: '-5px' }}>
         Image