added loader (#14)

Author: Dinoxh

.DS_Store

@@ -12,6 +12,7 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.0.17",
     "firebase": "^11.5.0",
+    "ldrs": "^1.1.6",
     "mobx": "^6.13.7",
     "mobx-react-lite": "^4.1.0",
     "react": "^19.0.0",

my-app/package-lock.json

@@ -1,24 +1,29 @@
 import React from 'react';
-
+import { Quantum } from 'ldrs/react'
+import 'ldrs/react/Quantum.css'
 
 function ListView(props) {
-
-
     return (
         <div className="bg-white text-black p-2 flex flex-col gap-5 h-full overflow-auto">
             {
-            props?.courses ? 
-            props.courses.map((course) => (
-                <div
-                    key={course.code}
-                    className="p-5 hover:bg-[#000061] flex items-center cursor-pointer border border-b-black border-solid w-full rounded-lg">
-                    <div>
-                        <p className={"font-bold text-[#000061]"}>{course.code}</p>
-                        <p className="font-bold">{course.name}</p>
-                        <p className="text-gray-600">{course.description}</p>
-                    </div>
-                </div>
-            )) : "loading"}
+                props?.courses && props.courses.length > 0 ?
+                    props.courses.map((course) => (
+                        <div
+                            key={course.code}
+                            className="p-5 hover:bg-[#000061] flex items-center cursor-pointer border border-b-black border-solid w-full rounded-lg">
+                            <div>
+                                <p className={"font-bold text-[#000061]"}>{course.code}</p>
+                                <p className="font-bold">{course.name}</p>
+                                <p className="text-gray-600">{course.description}</p>
+                            </div>
+                        </div>
+                    )) :
+                    <Quantum
+                        size="1000"
+                        speed="2"
+                        color="#000061"
+                    />
+            }
         </div>
     );
 }