loading states

nextjs/src/app/CourseList.tsx

@@ -7,8 +7,8 @@ export default function CourseList() {
   return (
     <div>
       {courses.map((c) => (
-        <Link href={`/course/${c.settings.name}`} key={c.settings.name}>
-          {c.settings.name}{" "}
+        <Link href={`/course/${c}`} key={c}>
+          {c}{" "}
         </Link>
       ))}
     </div>

nextjs/src/app/course/[courseName]/loading.tsx

@@ -0,0 +1,10 @@
+import { Spinner } from "@/components/Spinner";
+import React from "react";
+
+export default function Loading() {
+  return (
+    <div>
+      <Spinner />
+    </div>
+  );
+}

nextjs/src/components/Spinner.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import "./spinner.css"
+
+export const Spinner = () => {
+  return (
+    <div className="text-center m-3">
+      <span className="loader"></span>
+    </div>
+  );
+};

nextjs/src/components/spinner.css

@@ -0,0 +1,56 @@
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 3px solid;
+  border-color: #6c757d #6c757d transparent transparent;
+  box-sizing: border-box;
+  animation: rotation 2s linear infinite;
+}
+.loader::after,
+.loader::before {
+  content: '';  
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  border: 3px solid;
+  border-color: transparent transparent #092565 #092565;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: rotationBack 1s linear infinite;
+  transform-origin: center center;
+}
+/* #092565 */
+/* #3a0647 */
+.loader::before {
+  width: 32px;
+  height: 32px;
+  border-color: #6c757d #6c757d transparent transparent;
+  animation: rotation 3s linear infinite;
+}
+    
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+} 
+@keyframes rotationBack {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+