Add loading page

overload/src/app/components/coursesList.tsx

@@ -19,6 +19,9 @@ type Term = {
 };
 
 export const CoursesList = async () => {
+  //imitate delay
+  await new Promise(resolve => setTimeout(resolve, 3000));
+
   const res = await fetch('http://localhost:3000/api/home', {
     cache: 'no-store',
   });

overload/src/app/loading.css

@@ -0,0 +1,21 @@
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 2s linear infinite;
+}

overload/src/app/loading.tsx

@@ -0,0 +1,13 @@
+import './loading.css'
+import skullSvg from './resources/skull-head-svgrepo-com.svg';
+import Image from 'next/image'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen flex justify-center items-center  flex-col">
+      <div className="w-1/4 h-1/4">
+        <Image src={skullSvg} alt="OverLoad" className="animate-spin colored-svg" layout="responsive"/>
+      </div>
+    </div>
+  )
+}