From e09686ede94abc1ceabf48740c9997b42457946b Mon Sep 17 00:00:00 2001
From: avashilling <165050625+avashilling@users.noreply.github.com>
Date: Thu, 23 Oct 2025 12:07:39 -0400
Subject: [PATCH] replace loading symbol with shimmering cards (#4508)

---
 .../course_settings/course_settings.dart      | 46 ++++++++++++++++++-
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/lib/pangea/course_settings/course_settings.dart b/lib/pangea/course_settings/course_settings.dart
index 14e7494b6..600de91cf 100644
--- a/lib/pangea/course_settings/course_settings.dart
+++ b/lib/pangea/course_settings/course_settings.dart
@@ -20,6 +20,7 @@ import 'package:fluffychat/pangea/course_settings/pin_clipper.dart';
 import 'package:fluffychat/pangea/course_settings/topic_participant_list.dart';
 import 'package:fluffychat/pangea/events/constants/pangea_event_types.dart';
 import 'package:fluffychat/widgets/matrix.dart';
+import 'package:shimmer/shimmer.dart';
 
 class CourseSettings extends StatelessWidget {
   // final Room room;
@@ -237,8 +238,8 @@ class CourseSettings extends StatelessWidget {
                 ),
                 if (!locked)
                   controller.loadingActivities
-                      ? const Center(
-                          child: CircularProgressIndicator.adaptive(),
+                      ? ActivityCardPlaceholder(
+                          activityCount: topic.activityIds.length,
                         )
                       : activityError != null
                           ? ErrorIndicator(
@@ -265,6 +266,47 @@ class CourseSettings extends StatelessWidget {
   }
 }
 
+class ActivityCardPlaceholder extends StatelessWidget {
+  final int activityCount;
+
+  const ActivityCardPlaceholder({
+    super.key,
+    required this.activityCount,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final int shimmerCount = activityCount;
+    final theme = Theme.of(context);
+    final isColumnMode = FluffyThemes.isColumnMode(context);
+
+    return SizedBox(
+      height: isColumnMode ? 290.0 : 210.0,
+      child: ListView.builder(
+        scrollDirection: Axis.horizontal,
+        itemCount: shimmerCount,
+        itemBuilder: (context, index) {
+          return Padding(
+            padding: const EdgeInsets.only(right: 24.0),
+            child: Shimmer.fromColors(
+              baseColor: theme.colorScheme.primary.withAlpha(20),
+              highlightColor: theme.colorScheme.primary.withAlpha(50),
+              child: Container(
+                width: isColumnMode ? 160.0 : 120.0,
+                height: isColumnMode ? 280.0 : 200.0,
+                decoration: BoxDecoration(
+                  color: theme.colorScheme.surfaceContainer,
+                  borderRadius: BorderRadius.circular(12.0),
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}
+
 class TopicActivitiesList extends StatefulWidget {
   final Room room;
   final Map<String, ActivityPlanModel> activities;