Source Code added

mobile/lib/widgets/common/immich_loading_indicator.dart

@@ -0,0 +1,102 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:immich_mobile/widgets/common/immich_logo.dart';
+
+class ImmichLoadingIndicator extends HookWidget {
+  final double? borderRadius;
+
+  const ImmichLoadingIndicator({super.key, this.borderRadius});
+
+  @override
+  Widget build(BuildContext context) {
+    final logoAnimationController = useAnimationController(duration: const Duration(seconds: 6))
+      ..reverse()
+      ..repeat();
+
+    final borderAnimationController = useAnimationController(duration: const Duration(seconds: 6))..repeat();
+
+    return Container(
+      height: 80,
+      width: 80,
+      decoration: BoxDecoration(
+        color: Colors.transparent,
+        borderRadius: BorderRadius.circular(borderRadius ?? 50),
+        backgroundBlendMode: BlendMode.luminosity,
+      ),
+      child: AnimatedBuilder(
+        animation: borderAnimationController,
+        builder: (context, child) {
+          return CustomPaint(
+            painter: GradientBorderPainter(animation: borderAnimationController.value, strokeWidth: 3),
+            child: child,
+          );
+        },
+        child: Padding(
+          padding: const EdgeInsets.all(15),
+          child: RotationTransition(
+            turns: logoAnimationController,
+            child: const ImmichLogo(heroTag: 'logo'),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class GradientBorderPainter extends CustomPainter {
+  final double animation;
+  final double strokeWidth;
+  final double opacity = 0.7;
+  final colors = [
+    const Color(0xFFFA2921),
+    const Color(0xFFED79B5),
+    const Color(0xFFFFB400),
+    const Color(0xFF1E83F7),
+    const Color(0xFF18C249),
+  ];
+
+  GradientBorderPainter({required this.animation, required this.strokeWidth});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final center = Offset(size.width / 2, size.height / 2);
+    final radius = min(size.width, size.height) / 2 - strokeWidth / 2;
+
+    // Create a sweep gradient that covers the entire circle
+    final Rect rect = Rect.fromCircle(center: center, radius: radius);
+
+    // Create a paint with the gradient
+    final paint = Paint()
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = strokeWidth;
+
+    // Create a gradient that smoothly transitions between colors
+    final shader = SweepGradient(
+      // Use a fixed starting point and let matrix transformation handle rotation
+      startAngle: 0,
+      endAngle: 2 * 3.14159,
+      colors: [
+        // Repeat colors to ensure smooth transitions
+        ...colors.map((c) => c.withValues(alpha: opacity)),
+        colors.first.withValues(alpha: opacity),
+      ],
+      // Add evenly distributed stops
+      stops: List.generate(colors.length + 1, (index) => index / colors.length),
+      tileMode: TileMode.clamp,
+      // Use transformations to rotate the gradient
+      transform: GradientRotation(-animation * 2 * 3.14159),
+    ).createShader(rect);
+
+    paint.shader = shader;
+
+    // Draw the circular border
+    canvas.drawCircle(center, radius, paint);
+  }
+
+  @override
+  bool shouldRepaint(GradientBorderPainter oldDelegate) {
+    return animation != oldDelegate.animation;
+  }
+
+  double min(double a, double b) => a < b ? a : b;
+}