Skip to content

Commit 7e32290

Browse files
githubxnishantgithubxnishant
authored
loader added
1 parent 65cbb82 commit 7e32290

File tree

1 file changed

+73
-41
lines changed

1 file changed

+73
-41
lines changed

‎src/Pages/SOICT/CSE.jsx‎

Lines changed: 73 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const Cse = () => {
1111
const [unsortedData, setUnsortedData] = useState([]);
1212
const [subData, setSubData] = useState([]);
1313
const [query, setQuery] = useState([]);
14+
const [loading, setLoading] = useState(false);
1415

1516
const searchQuery = async () => {
1617
const subCode = prompt("Search Subject Code");
@@ -31,8 +32,10 @@ const Cse = () => {
3132
useEffect(() => {
3233
const fetchAllSubjects = async () => {
3334
try {
35+
setLoading(true);
3436
const response = await axios.get(`${server}/viewsubjects/cse`);
3537
setUnsortedData(response.data);
38+
setLoading(false);
3639
} catch (error) {
3740
console.log("Error Fetching Subject Data from DB!", error);
3841
}
@@ -65,49 +68,62 @@ const Cse = () => {
6568
</div>
6669
</div>
6770
<div className='flex md:justify-between justify-center flex-wrap gap-5 md:mb-0 -mb-1 h-[31vh] md:w-auto'>
68-
{subData.map((subject) => (
69-
<div className='border-2 bg-white border-[#d9d9d9] h-60 md:w-[30%] w-[80%] rounded p-3 shadow-md'>
70-
<div className='w-full h-16 bg-[#d9d9d9] rounded flex items-center justify-center text-center mb-2 p-3 text-sm'>{subject.subCode.toUpperCase()} - {subject.subName}</div>
71-
<div className='h-24 overflow-auto'>
72-
{subject.year2025.midSem === ' ' && subject.year2025.endSem === ' ' ? '' : <div className='border-2 my-1 h-11 rounded px-7 flex items-center justify-between text-sm'>
73-
<h1>{subject.year2025.year}</h1>
74-
<div className='flex items-center justify-center'>
75-
{subject.year2025.midSem === ' ' ? '' : <a href={subject.year2025.midSem} target='_blank' className='text-[#2563eb]'>Mid</a>}
76-
{subject.year2025.midSem != ' ' && subject.year2025.endSem != ' ' ? <p className='px-3'>|</p> : ''}
77-
{subject.year2025.endSem === ' ' ? '' : <a href={subject.year2025.endSem} target='_blank' className='text-[#2563eb]'>End</a>}
71+
{loading ?
72+
<>
73+
<Loader />
74+
<Loader />
75+
<Loader />
76+
<Loader />
77+
<Loader />
78+
<Loader />
79+
</>
80+
:
81+
<>
82+
{subData.map((subject) => (
83+
<div className='border-2 bg-white border-[#d9d9d9] h-60 md:w-[30%] w-[80%] rounded p-3 shadow-md'>
84+
<div className='w-full h-16 bg-[#d9d9d9] rounded flex items-center justify-center text-center mb-2 p-3 text-sm'>{subject.subCode.toUpperCase()} - {subject.subName}</div>
85+
<div className='h-24 overflow-auto'>
86+
{subject.year2025.midSem === ' ' && subject.year2025.endSem === ' ' ? '' : <div className='border-2 my-1 h-11 rounded px-7 flex items-center justify-between text-sm'>
87+
<h1>{subject.year2025.year}</h1>
88+
<div className='flex items-center justify-center'>
89+
{subject.year2025.midSem === ' ' ? '' : <a href={subject.year2025.midSem} target='_blank' className='text-[#2563eb]'>Mid</a>}
90+
{subject.year2025.midSem != ' ' && subject.year2025.endSem != ' ' ? <p className='px-3'>|</p> : ''}
91+
{subject.year2025.endSem === ' ' ? '' : <a href={subject.year2025.endSem} target='_blank' className='text-[#2563eb]'>End</a>}
92+
</div>
93+
</div>}
94+
{subject.year2024.midSem === ' ' && subject.year2024.endSem === ' ' ? '' : <div className='border-2 my-1 h-11 rounded px-7 flex items-center justify-between text-sm'>
95+
<h1>{subject.year2024.year}</h1>
96+
<div className='flex items-center justify-center'>
97+
{subject.year2024.midSem === ' ' ? '' : <a href={subject.year2024.midSem} target='_blank' className='text-[#2563eb]'>Mid</a>}
98+
{subject.year2024.midSem != ' ' && subject.year2024.endSem != ' ' ? <p className='px-3'>|</p> : ''}
99+
{subject.year2024.endSem === ' ' ? '' : <a href={subject.year2024.endSem} target='_blank' className='text-[#2563eb]'>End</a>}
100+
</div>
101+
</div>}
102+
{subject.year2023.midSem === ' ' && subject.year2023.endSem === ' ' ? '' : <div className='border-2 my-1 h-11 rounded px-7 flex items-center justify-between text-sm'>
103+
<h1>{subject.year2023.year}</h1>
104+
<div className='flex items-center justify-center'>
105+
{subject.year2023.midSem === ' ' ? '' : <a href={subject.year2023.midSem} target='_blank' className='text-[#2563eb]'>Mid</a>}
106+
{subject.year2023.midSem != ' ' && subject.year2023.endSem != ' ' ? <p className='px-3'>|</p> : ''}
107+
{subject.year2023.endSem === ' ' ? '' : <a href={subject.year2023.endSem} target='_blank' className='text-[#2563eb]'>End</a>}
108+
</div>
109+
</div>}
110+
{subject.year2022.midSem === ' ' && subject.year2022.endSem === ' ' ? '' : <div className='border-2 my-1 h-11 rounded px-7 flex items-center justify-between text-sm'>
111+
<h1>{subject.year2022.year}</h1>
112+
<div className='flex items-center justify-center'>
113+
{subject.year2022.midSem === ' ' ? '' : <a href={subject.year2022.midSem} target='_blank' className='text-[#2563eb]'>Mid</a>}
114+
{subject.year2022.midSem != ' ' && subject.year2022.endSem != ' ' ? <p className='px-3'>|</p> : ''}
115+
{subject.year2022.endSem === ' ' ? '' : <a href={subject.year2022.endSem} target='_blank' className='text-[#2563eb]'>End</a>}
116+
</div>
117+
</div>}
118+
{subject.year2025.midSem === ' ' && subject.year2025.endSem === ' ' && subject.year2024.midSem === ' ' && subject.year2024.endSem === ' ' && subject.year2023.midSem === ' ' && subject.year2023.endSem === ' ' && subject.year2022.midSem === ' ' && subject.year2022.endSem === ' ' ? <div className='flex justify-center items-center h-24'>No data available!</div> : ''}
78119
</div>
79-
</div>}
80-
{subject.year2024.midSem === ' ' && subject.year2024.endSem === ' ' ? '' : <div className='border-2 my-1 h-11 rounded px-7 flex items-center justify-between text-sm'>
81-
<h1>{subject.year2024.year}</h1>
82-
<div className='flex items-center justify-center'>
83-
{subject.year2024.midSem === ' ' ? '' : <a href={subject.year2024.midSem} target='_blank' className='text-[#2563eb]'>Mid</a>}
84-
{subject.year2024.midSem != ' ' && subject.year2024.endSem != ' ' ? <p className='px-3'>|</p> : ''}
85-
{subject.year2024.endSem === ' ' ? '' : <a href={subject.year2024.endSem} target='_blank' className='text-[#2563eb]'>End</a>}
120+
<div className='h-10 mt-2 bg-[#d9d9d9] rounded flex justify-center items-center'>
121+
<button className='text-sm hover:font-semibold duration-300 transition-all hover:text-[#2563eb]'>Download Syllabus</button>
86122
</div>
87-
</div>}
88-
{subject.year2023.midSem === ' ' && subject.year2023.endSem === ' ' ? '' : <div className='border-2 my-1 h-11 rounded px-7 flex items-center justify-between text-sm'>
89-
<h1>{subject.year2023.year}</h1>
90-
<div className='flex items-center justify-center'>
91-
{subject.year2023.midSem === ' ' ? '' : <a href={subject.year2023.midSem} target='_blank' className='text-[#2563eb]'>Mid</a>}
92-
{subject.year2023.midSem != ' ' && subject.year2023.endSem != ' ' ? <p className='px-3'>|</p> : ''}
93-
{subject.year2023.endSem === ' ' ? '' : <a href={subject.year2023.endSem} target='_blank' className='text-[#2563eb]'>End</a>}
94-
</div>
95-
</div>}
96-
{subject.year2022.midSem === ' ' && subject.year2022.endSem === ' ' ? '' : <div className='border-2 my-1 h-11 rounded px-7 flex items-center justify-between text-sm'>
97-
<h1>{subject.year2022.year}</h1>
98-
<div className='flex items-center justify-center'>
99-
{subject.year2022.midSem === ' ' ? '' : <a href={subject.year2022.midSem} target='_blank' className='text-[#2563eb]'>Mid</a>}
100-
{subject.year2022.midSem != ' ' && subject.year2022.endSem != ' ' ? <p className='px-3'>|</p> : ''}
101-
{subject.year2022.endSem === ' ' ? '' : <a href={subject.year2022.endSem} target='_blank' className='text-[#2563eb]'>End</a>}
102-
</div>
103-
</div>}
104-
{subject.year2025.midSem === ' ' && subject.year2025.endSem === ' ' && subject.year2024.midSem === ' ' && subject.year2024.endSem === ' ' && subject.year2023.midSem === ' ' && subject.year2023.endSem === ' ' && subject.year2022.midSem === ' ' && subject.year2022.endSem === ' ' ? <div className='flex justify-center items-center h-24'>No data available!</div> : ''}
105-
</div>
106-
<div className='h-10 mt-2 bg-[#d9d9d9] rounded flex justify-center items-center'>
107-
<button className='text-sm hover:font-semibold duration-300 transition-all hover:text-[#2563eb]'>Download Syllabus</button>
108-
</div>
109-
</div>
110-
))}
123+
</div>
124+
))}
125+
</>
126+
}
111127
</div>
112128
</div>
113129
<Footer />
@@ -117,4 +133,20 @@ const Cse = () => {
117133
)
118134
}
119135

136+
const Loader = () => {
137+
return (
138+
<>
139+
<div className='border-2 bg-white border-[#d9d9d9] h-60 md:w-[30%] w-[80%] rounded p-3 shadow-md'>
140+
<div className='w-full h-16 bg-[#d9d9d9] rounded flex items-center justify-center text-center mb-2 p-3 text-sm'></div>
141+
<div className='h-24 flex items-center flex-col justify-center'>
142+
Loading...
143+
</div>
144+
<div className='h-10 mt-2 bg-[#d9d9d9] rounded flex justify-center items-center'>
145+
<button className='text-sm hover:font-semibold duration-300 transition-all hover:text-[#2563eb]'></button>
146+
</div>
147+
</div>
148+
</>
149+
)
150+
}
151+
120152
export default Cse;

0 commit comments

Comments
 (0)