Merge pull request #272 from nishant0708/skeletons

[Feature Request]: Want to add skeletons #261

src/components/page4/Pyq.css

@@ -10,7 +10,6 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-
 }
 
 .container-pyq {
@@ -28,17 +27,17 @@ body {
     border: solid 1px white;
     box-shadow: 0px 0px 15px lightblue;
 } */
-.active .subject-box{
-    background-color: #000016 ;
-    border: solid 1px white;
-    box-shadow: 0px 0px 15px lightblue;
+.active .subject-box {
+  background-color: #000016;
+  border: solid 1px white;
+  box-shadow: 0px 0px 15px lightblue;
 }
 .year-heading {
   font-size: 24px;
   margin-bottom: 20px;
 }
-.active .back-btn:hover{
-    background-color: #1e1d1d !important;
+.active .back-btn:hover {
+  background-color: #1e1d1d !important;
 }
 
 .semester-selection {
@@ -88,10 +87,10 @@ body {
   margin: 10px 0;
 }
 .subject-title-container {
-    width: 300px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .file-actions {
@@ -178,7 +177,7 @@ body {
   padding: 20px;
   border-radius: 30px;
   cursor: pointer;
-  
+
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   background: white;
   transition: transform 0.3s ease;
@@ -203,14 +202,14 @@ body {
 }
 
 @media (max-width: 980px) {
- .subject-box{
+  .subject-box {
     width: 300px;
- }
+  }
 }
-@media (max-width: 850px){
-    .back-btn{
-        display: none;
-    }
+@media (max-width: 850px) {
+  .back-btn {
+    display: none;
+  }
 }
 
 @media (max-width: 768px) {
@@ -223,19 +222,14 @@ body {
     width: 100%;
     margin-bottom: 10px;
   }
-
-
-
 }
 
-
-
 .footer {
   position: relative;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: #e2e0e0;
   text-align: center;
-  padding:0;
+  padding: 0;
 }

src/components/page4/SkeletonLoader.css

@@ -0,0 +1,71 @@
+.skeleton-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .skeleton-heading,
+  .skeleton-semester-card,
+  .skeleton-subject-title,
+  .skeleton-file {
+    background-color: #e0e0e0;
+    border-radius: 4px;
+    margin: 10px 0;
+  }
+
+  .skeleton-heading {
+    width: 60%;
+    height: 24px;
+  }
+
+  .skeleton-semester {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+  }
+
+  .skeleton-semester-card {
+    width: 150px;
+    height: 80px;
+  }
+
+  .skeleton-subject {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 30px;
+    padding: 3em 0em;
+    width: 100%;
+  }
+
+  .skeleton-subject-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2px;
+    height: auto;
+    width: 200px;
+    border-radius: 8px;
+  }
+
+  .skeleton-subject-title {
+    width: 80%;
+    height: 24px;
+  }
+
+  .skeleton-file {
+    width: 80%;
+    height: 24px;
+  }
+
+  @media screen and (max-width: 600px) {
+    .skeleton-semester-card {
+      width: 100px;
+      height: 60px;
+    }
+
+    .skeleton-subject-box {
+      width: 100%;
+    }
+  }
+

src/components/page4/SkeletonLoader.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import './SkeletonLoader.css';
+
+const SkeletonLoader = () => {
+  return (
+    <div className="skeleton-container">
+      <div className="skeleton-heading"></div>
+      <div className="skeleton-semester">
+        <div className="skeleton-semester-card"></div>
+        <div className="skeleton-semester-card"></div>
+      </div>
+      <div className="skeleton-subject">
+        <div className="skeleton-subject-box">
+          <div className="skeleton-subject-title"></div>
+          <div className="skeleton-file"></div>
+          <div className="skeleton-file"></div>
+        </div>
+        <div className="skeleton-subject-box">
+          <div className="skeleton-subject-title"></div>
+          <div className="skeleton-file"></div>
+          <div className="skeleton-file"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SkeletonLoader;

src/components/page4/lecture.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Header from '../../pages/header';
 import '../page4/lecture.css';
 import cn from '../../assets/computerNetwork.jpg';
@@ -11,15 +11,16 @@ import oops from '../../assets/oops.jpg';
 import wt from '../../assets/wt.jpg';
 import se from '../../assets/se.jpg';
 import bd from '../../assets/bd.jpg';
-import {FaMagnifyingGlass } from 'react-icons/fa6'
-import NoResultsFound from '../noResultsFound/index.js'
-
-import {Link} from 'react-router-dom';
+import { FaMagnifyingGlass } from 'react-icons/fa6';
+import NoResultsFound from '../noResultsFound/index.js';
+import { Link } from 'react-router-dom';
 import Footer from './../../pages/footer.js';
+import LectureSkeleton from '../page6(2nd)/LectureSkeleton.jsx'; // Import the skeleton component
 
 function Lecture() {
   // State for search query
   const [searchQuery, setSearchQuery] = useState('');
+  const [loading, setLoading] = useState(true); // Loading state
 
   // Array of lecture items
   const lectureItems = [
@@ -41,6 +42,13 @@ function Lecture() {
     item.title.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  useEffect(() => {
+    // Simulate a loading delay
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+  }, []);
+
   return (
     <div>
       <Link to="/trdyear" className="back-icon" style={{ position: 'absolute', top: '75px !important', left: '35px', fontSize: '42px' }}>
@@ -68,9 +76,8 @@ function Lecture() {
         <h1>Lecture</h1>
       </div>
       {/* Input field for search */}
-      <div class='inputDiv'>
-      <FaMagnifyingGlass className='left'/>
-
+      <div className='inputDiv'>
+        <FaMagnifyingGlass className='left' />
         <input
           type='text'
           className='inputField'
@@ -80,19 +87,27 @@ function Lecture() {
         />
       </div>
       {/* Display filtered lecture items */}
-      { filteredItems.length !== 0 ?
-      <div className="container">
-        {filteredItems.map((item, index) => (
-          <div className="box" key={index}>
-            <div className="upper">
-              <img src={item.image} alt={item.title} />
+      {loading ? (
+        <div className="container">
+          {Array(lectureItems.length).fill().map((_, index) => (
+            <LectureSkeleton key={index} />
+          ))}
+        </div>
+      ) : filteredItems.length !== 0 ? (
+        <div className="container">
+          {filteredItems.map((item, index) => (
+            <div className="box" key={index}>
+              <div className="upper">
+                <img src={item.image} alt={item.title} />
+              </div>
+              <span className="text-box-in">{item.title}</span>
+              <a href={item.link}>View Content</a>
             </div>
-            <span className="text-box-in">{item.title}</span>
-            <a href={item.link}>View Content</a>
-          </div>
-        ))}
-      </div>
-      : <NoResultsFound />}
+          ))}
+        </div>
+      ) : (
+        <NoResultsFound />
+      )}
       <Footer />
     </div>
   );

src/components/page4/quantum.css

@@ -227,4 +227,38 @@ input::placeholder{
     background-color: #009087;
     transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
   }
-
+  /* Add these styles to quantum.css */
+
+.skeleton {
+  background-color: #c3c2c2;
+  border-radius: 4px;
+  animation: skeleton-loading 1.2s infinite linear;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: #cccccc9c;
+  }
+  50% {
+    background-color: #8888884a;
+  }
+  100% {
+    background-color: #cccccc9c;
+  }
+}
+
+
+.skeleton-book {
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 250px;
+  height: 300px;
+  background-color: #c3c2c2;
+  animation: skeleton-loading 1.2s infinite linear;
+  box-shadow: 1px 1px 12px #cecece;
+  border-radius: 10px;
+  padding: 10px;
+  gap: 10px;
+}