diff --git a/digital-course-file/package-lock.json b/digital-course-file/package-lock.json
index 49a1ce8a5baf8ef1db4976648c813960c9a15cfd..d704cbe303be8b01ab0df7c673ba2ee50bbfafaf 100644
--- a/digital-course-file/package-lock.json
+++ b/digital-course-file/package-lock.json
@@ -22,6 +22,7 @@
         "react-github-login-button": "^1.0.1",
         "react-google-button": "^0.7.2",
         "react-icons": "^4.2.0",
+        "react-loader-spinner": "^4.0.0",
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.2",
         "web-vitals": "^1.1.0"
@@ -15612,6 +15613,18 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-loader-spinner": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz",
+      "integrity": "sha512-RU2vpEej6G4ECei0h3q6bgLU10of9Lw5O+4AwF/mtkrX5oY20Sh/AxoPJ7etbrs/7Q3u4jN5qwCwGLRKCHpk6g==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/react-overlays": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
@@ -34020,6 +34033,14 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-loader-spinner": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz",
+      "integrity": "sha512-RU2vpEej6G4ECei0h3q6bgLU10of9Lw5O+4AwF/mtkrX5oY20Sh/AxoPJ7etbrs/7Q3u4jN5qwCwGLRKCHpk6g==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-overlays": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
diff --git a/digital-course-file/package.json b/digital-course-file/package.json
index f787749489d020d2c589a16377f1555809b2783c..9f134ac65a46d08ff1d5680b6e869244ae2c266f 100644
--- a/digital-course-file/package.json
+++ b/digital-course-file/package.json
@@ -18,6 +18,7 @@
     "react-github-login-button": "^1.0.1",
     "react-google-button": "^0.7.2",
     "react-icons": "^4.2.0",
+    "react-loader-spinner": "^4.0.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
     "web-vitals": "^1.1.0"
diff --git a/digital-course-file/src/App.css b/digital-course-file/src/App.css
index 67d986617329d1150e44620b0bea8b39dd6faf82..e9587fda0ed805f9ece0be3275f37fd7496222be 100644
--- a/digital-course-file/src/App.css
+++ b/digital-course-file/src/App.css
@@ -128,3 +128,11 @@ body {
   padding-top: 10px;
   text-align: center;
 }
+
+.centered {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-top: -50px;
+  margin-left: -100px;
+}
diff --git a/digital-course-file/src/index.js b/digital-course-file/src/index.js
index c801aa0a9b30325b3974d1d848f8430e44ffcfae..b140998e280df0a52cea84584efd4d5b17048312 100644
--- a/digital-course-file/src/index.js
+++ b/digital-course-file/src/index.js
@@ -3,5 +3,6 @@ import ReactDOM from 'react-dom';
 // import './styles.css';
 import Routes from "./Routes"
 import "bootstrap/dist/css/bootstrap.min.css"
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 
 ReactDOM.render(<Routes/>,document.getElementById("root"));
\ No newline at end of file
diff --git a/digital-course-file/src/user/Hero.js b/digital-course-file/src/user/Hero.js
index 552cccf5b941070fda020565c815dcc51498bcf4..4272da39fb687054086889fcc0f56d5b8ec342af 100644
--- a/digital-course-file/src/user/Hero.js
+++ b/digital-course-file/src/user/Hero.js
@@ -8,10 +8,21 @@ import Deffolders from './Deffolders'
 import { useParams } from 'react-router-dom'
 import copyright from './copyright'
 import { Link } from 'react-router-dom'
+import Loader from "react-loader-spinner";
 
 const Hero = ({ handleLogout }) => {
   const { folderId } = useParams()
   const { folder, childFolders } = useFolder(folderId)
+  console.log(folder);
+   if (!folder) {
+        return <><div className='centered'><Loader
+        type="Puff"
+        color="#00BFFF"
+        height={100}
+        width={100}
+        timeout={3000} //3 secs
+      /></div></>
+    }
 
   return (
     <>
@@ -31,7 +42,7 @@ const Hero = ({ handleLogout }) => {
         <div className='d-flex align-items-center'>
           <FolderNav currentFolder={folder} />
           <AddFolder currentFolder={folder} />
-          {childFolders.length == 0 && <Deffolders currentFolder={folder} />}
+          {(childFolders.length == 0  && folder.id==null) && <Deffolders currentFolder={folder} />}
         </div>
 
         {childFolders.length > 0 && (