diff --git a/package-lock.json b/package-lock.json
index 4de1d03..30f279d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "react-redux": "^8.0.7",
         "react-router-dom": "^6.8.2",
         "react-scripts": "5.0.1",
+        "react-spinners": "^0.13.8",
         "stream": "^0.0.2",
         "stripe": "^14.4.0",
         "tunnel2": "^0.0.6",
@@ -22290,6 +22291,15 @@
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 6f647b7..df92498 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "react-redux": "^8.0.7",
     "react-router-dom": "^6.8.2",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.8",
     "stream": "^0.0.2",
     "stripe": "^14.4.0",
     "tunnel2": "^0.0.6",
diff --git a/src/views/BookViewPorts/updateBookPC.tsx b/src/views/BookViewPorts/updateBookPC.tsx
index 683d0bc..d863fce 100644
--- a/src/views/BookViewPorts/updateBookPC.tsx
+++ b/src/views/BookViewPorts/updateBookPC.tsx
@@ -8,6 +8,7 @@ import list from "../List";
 import FlatList from "flatlist-react/lib";
 import Markdown from "react-markdown";
 import {saveAs} from 'file-saver';
+import {BarLoader} from "react-spinners";
 
 interface Props{
     bid : string;
@@ -42,6 +43,7 @@ const UpdateBookPC: React.FC<Props>= (props:Props)=>{
     let [displaySImage, setDisplaySImage] = useState(box)
     let [saveMode, setSaveMode] = useState('write')
 
+    let [loading, setLoading] = useState(true)
     // for nav bar
     let [addOpacity, setAddOpacity] = useState(0)
     const [addVisibility, setAddVisibility] = useState<Visibility | undefined>('hidden')
@@ -455,6 +457,7 @@ const UpdateBookPC: React.FC<Props>= (props:Props)=>{
                 meta.len = details['len']
                 meta.list = details['attributes']
                 setMeta(meta!)
+                setLoading(false)
             })
             console.log(data)
         });
@@ -582,23 +585,27 @@ const UpdateBookPC: React.FC<Props>= (props:Props)=>{
                            }}>
                                <div style={{margin:30, width:'80%'}}>
                                <p style={{fontSize:30}}>Meta<span style={{color:'#ce4045', fontWeight:'bold'}}>Data</span></p>
-                                   <div style={{height:290, overflow:'auto', width:'100%'}}>
-                                       {meta !== undefined?
+                                   {!loading? <div style={{height: 290, overflow: 'auto', width: '100%'}}>
+                                       {meta !== undefined ?
                                            <div>
-                                               <div style={{display:'flex'}}>
-                                                   <div className='circle' style={{background:'white'}}></div><div className='circle' style={{background:'#4eb9b5'}}></div><div className='circle' style={{background:'#9e4eb9'}}></div>
+                                               <div style={{display: 'flex'}}>
+                                                   <div className='circle' style={{background: 'white'}}></div>
+                                                   <div className='circle' style={{background: '#4eb9b5'}}></div>
+                                                   <div className='circle' style={{background: '#9e4eb9'}}></div>
                                                </div>
-                                               <p style={{color:'#ddd'}}> The Attributes</p>
-                                               <div style={{display:'flex', flexWrap:'wrap', order:'2'}}>
-                                                   {meta.list.map(att =>{
-                                                       return <div className='highlight-dark' style={{margin:6, color:'#aaa'}}>{att}</div>
+                                               <p style={{color: '#ddd'}}> The Attributes</p>
+                                               <div style={{display: 'flex', flexWrap: 'wrap', order: '2'}}>
+                                                   {meta.list.map(att => {
+                                                       return <div className='highlight-dark'
+                                                                   style={{margin: 6, color: '#aaa'}}>{att}</div>
                                                    })}
                                                </div>
 
-                                               <p style={{color:'#ddd'}}><span style={{fontWeight:'bold'}}>Number of rows:</span> <span style={{color:'#ea37b1'}}>{meta.len}</span></p>
+                                               <p style={{color: '#ddd'}}><span style={{fontWeight: 'bold'}}>Number of rows:</span>
+                                                   <span style={{color: '#ea37b1'}}>{meta.len}</span></p>
                                            </div>
-                                       :<div></div>}
-                                   </div>
+                                           : <div></div>}
+                                   </div>: <BarLoader loading={true} cssOverride={{width:'100%'}} color={'#ef2fb8'}/>}
                                </div>
                            </div>
                        </div>