Skip to content

Commit b9e03d4

Browse files
chahatkeshchahatkesh
committed
feat: enhance loading experience with minimal UI updates and progress indicators in LearningProgressSection
1 parent 08beef6 commit b9e03d4

File tree

1 file changed

+23
-41
lines changed

1 file changed

+23
-41
lines changed

‎src/components/dashboard/LearningProgressSection.jsx‎

Lines changed: 23 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -199,16 +199,10 @@ const LearningProgressSection = ({ user }) => {
199199
);
200200
}, [searchTerm, isSearchActive]);
201201

202-
// Calculate progress percentage for resource calculations
203-
const calculateResourceProgress = () => {
204-
if (totalLeaguesForCalculation === 0) return 100;
205-
return Math.round((completedResourceCalculations.size / totalLeaguesForCalculation) * 100);
206-
};
207-
208202
const getLoadingMessage = () => {
209203
if (loading) return 'Loading dashboard...';
210204
if (!resourcesCalculationComplete && totalLeaguesForCalculation > 0) {
211-
return `Calculating resources... (${completedResourceCalculations.size}/${totalLeaguesForCalculation})`;
205+
return `Loading Dashboard... (${completedResourceCalculations.size}/${totalLeaguesForCalculation})`;
212206
}
213207
return 'Almost ready!';
214208
};
@@ -217,72 +211,60 @@ const LearningProgressSection = ({ user }) => {
217211
const isFullyLoaded = !loading && resourcesCalculationComplete;
218212

219213
if (!isFullyLoaded) {
220-
const progress = calculateResourceProgress();
221214
const loadingMessage = getLoadingMessage();
222215

223216
return (
224217
<div className="min-h-screen bg-gray-50">
225218
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
226-
<div className="animate-pulse space-y-6">
227-
{/* Loading Progress Indicator */}
228-
<div className="bg-white rounded-2xl border border-gray-100 p-6">
229-
<div className="text-center space-y-4">
230-
<div className="w-16 h-16 bg-gradient-to-br from-[#FFDE59] to-[#FFD700] rounded-2xl flex items-center justify-center mx-auto">
231-
<div className="w-8 h-8 border-2 border-gray-800 border-t-transparent rounded-full animate-spin"></div>
232-
</div>
233-
<div className="space-y-2">
234-
<h3 className="text-lg font-semibold text-gray-900">{loadingMessage}</h3>
235-
{!loading && totalLeaguesForCalculation > 0 && (
236-
<div className="w-full bg-gray-200 rounded-full h-2 max-w-md mx-auto">
237-
<div
238-
className="bg-gradient-to-r from-[#FFDE59] to-[#FFD700] h-2 rounded-full transition-all duration-300"
239-
style={{ width: `${progress}%` }}
240-
></div>
241-
</div>
242-
)}
243-
<p className="text-sm text-gray-600">
244-
{loading ? 'Setting up your learning environment...' : 'Finalizing statistics and progress data...'}
219+
<div className="space-y-6">
220+
{/* Minimal Loading Text */}
221+
<div className="bg-white rounded-2xl border border-gray-100 p-4">
222+
<div className="text-center">
223+
<h3 className="text-lg font-medium text-gray-900">{loadingMessage}</h3>
224+
{!loading && totalLeaguesForCalculation > 0 && (
225+
<p className="text-sm text-gray-600 mt-1">
226+
Progress: {completedResourceCalculations.size}/{totalLeaguesForCalculation} leagues
245227
</p>
246-
</div>
228+
)}
247229
</div>
248230
</div>
249231

250232
{/* Header skeleton */}
251233
<div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-4">
252-
<div className="h-8 bg-gray-200 rounded w-1/3"></div>
253-
<div className="h-4 bg-gray-200 rounded w-2/3"></div>
234+
<div className="h-8 bg-gray-200 rounded w-1/3 animate-pulse"></div>
235+
<div className="h-4 bg-gray-200 rounded w-2/3 animate-pulse"></div>
254236
</div>
255237

256238
{/* Progress stats skeleton */}
257239
<div className="bg-white rounded-2xl border border-gray-100 p-6">
258-
<div className="h-6 bg-gray-200 rounded w-1/4 mb-6"></div>
240+
<div className="h-6 bg-gray-200 rounded w-1/4 mb-6 animate-pulse"></div>
259241
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
260242
{[1, 2, 3].map(i => (
261243
<div key={i} className="text-center space-y-4">
262-
<div className="w-20 h-20 bg-gray-200 rounded-full mx-auto"></div>
263-
<div className="h-4 bg-gray-200 rounded w-24 mx-auto"></div>
264-
<div className="h-3 bg-gray-200 rounded w-16 mx-auto"></div>
244+
<div className="w-20 h-20 bg-gray-200 rounded-full mx-auto animate-pulse"></div>
245+
<div className="h-4 bg-gray-200 rounded w-24 mx-auto animate-pulse"></div>
246+
<div className="h-3 bg-gray-200 rounded w-16 mx-auto animate-pulse"></div>
265247
</div>
266248
))}
267249
</div>
268250
</div>
269251

270252
{/* Available Learning Paths skeleton */}
271253
<div className="bg-white rounded-2xl border border-gray-100 p-6">
272-
<div className="h-6 bg-gray-200 rounded w-1/3 mb-6"></div>
254+
<div className="h-6 bg-gray-200 rounded w-1/3 mb-6 animate-pulse"></div>
273255
<div className="space-y-4">
274256
{[1, 2, 3].map(i => (
275257
<div key={i} className="border border-gray-100 rounded-xl p-6">
276-
<div className="h-5 bg-gray-200 rounded w-1/4 mb-4"></div>
258+
<div className="h-5 bg-gray-200 rounded w-1/4 mb-4 animate-pulse"></div>
277259
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
278260
{[1, 2].map(j => (
279261
<div key={j} className="p-4 bg-gray-50 rounded-lg">
280-
<div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
281-
<div className="h-3 bg-gray-200 rounded w-full mb-3"></div>
262+
<div className="h-4 bg-gray-200 rounded w-3/4 mb-2 animate-pulse"></div>
263+
<div className="h-3 bg-gray-200 rounded w-full mb-3 animate-pulse"></div>
282264
<div className="flex space-x-2">
283-
<div className="h-3 bg-gray-200 rounded w-12"></div>
284-
<div className="h-3 bg-gray-200 rounded w-16"></div>
285-
<div className="h-3 bg-gray-200 rounded w-14"></div>
265+
<div className="h-3 bg-gray-200 rounded w-12 animate-pulse"></div>
266+
<div className="h-3 bg-gray-200 rounded w-16 animate-pulse"></div>
267+
<div className="h-3 bg-gray-200 rounded w-14 animate-pulse"></div>
286268
</div>
287269
</div>
288270
))}

0 commit comments

Comments
 (0)