[mob][photos] Improve video loading UI

mobile/lib/ui/common/loading_widget.dart

@@ -25,6 +25,7 @@ class EnteLoadingWidget extends StatelessWidget {
           child: CircularProgressIndicator(
             strokeWidth: 2,
             color: color ?? getEnteColorScheme(context).strokeBase,
+            strokeCap: StrokeCap.round,
           ),
         ),
       ),

mobile/lib/ui/viewer/file/thumbnail_widget.dart

@@ -43,6 +43,7 @@ class ThumbnailWidget extends StatefulWidget {
   ///On video thumbnails, shows the video duration if true. If false,
   ///shows a centered play icon.
   final bool shouldShowVideoDuration;
+  final bool shouldShowVideoOverlayIcon;
 
   ThumbnailWidget(
     this.file, {
@@ -60,6 +61,7 @@ class ThumbnailWidget extends StatefulWidget {
     this.thumbnailSize = thumbnailSmallSize,
     this.shouldShowFavoriteIcon = true,
     this.shouldShowVideoDuration = false,
+    this.shouldShowVideoOverlayIcon = true,
   }) : super(key: key ?? Key(file.tag));
 
   @override
@@ -157,7 +159,7 @@ class _ThumbnailWidgetState extends State<ThumbnailWidget> {
         if (widget.shouldShowVideoDuration) {
           contentChildren
               .add(VideoOverlayDuration(duration: widget.file.duration!));
-        } else {
+        } else if (widget.shouldShowVideoOverlayIcon) {
           contentChildren.add(const VideoOverlayIcon());
         }
       } else if (widget.shouldShowLivePhotoOverlay &&

mobile/lib/ui/viewer/file/video_widget_native.dart

@@ -17,6 +17,7 @@ import "package:photos/services/files_service.dart";
 import "package:photos/theme/colors.dart";
 import "package:photos/theme/ente_theme.dart";
 import "package:photos/ui/actions/file/file_actions.dart";
+import "package:photos/ui/common/loading_widget.dart";
 import "package:photos/ui/viewer/file/native_video_player_controls/play_pause_button.dart";
 import "package:photos/ui/viewer/file/native_video_player_controls/seek_bar.dart";
 import "package:photos/ui/viewer/file/thumbnail_widget.dart";
@@ -512,21 +513,35 @@ class _VideoWidgetNativeState extends State<VideoWidgetNative>
           constraints: const BoxConstraints.expand(),
         ),
         Center(
-          child: SizedBox.fromSize(
-            size: const Size.square(20),
+          child: Container(
+            width: 48,
+            height: 48,
+            padding: const EdgeInsets.all(8),
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(24),
+              color: Colors.black.withOpacity(0.3),
+              border: Border.all(
+                color: strokeFaintDark,
+                width: 1,
+              ),
+            ),
             child: ValueListenableBuilder(
               valueListenable: _progressNotifier,
               builder: (BuildContext context, double? progress, _) {
                 return progress == null || progress == 1
-                    ? const CupertinoActivityIndicator(
-                        color: Colors.white,
+                    ? const EnteLoadingWidget(
+                        size: 32,
+                        color: fillBaseDark,
+                        padding: 0,
                       )
                     : CircularProgressIndicator(
-                        backgroundColor: Colors.black,
+                        backgroundColor: Colors.transparent,
                         value: progress,
                         valueColor: const AlwaysStoppedAnimation<Color>(
                           Color.fromRGBO(45, 194, 98, 1.0),
                         ),
+                        strokeWidth: 2,
+                        strokeCap: StrokeCap.round,
                       );
               },
             ),
@@ -543,6 +558,7 @@ class _VideoWidgetNativeState extends State<VideoWidgetNative>
       child: ThumbnailWidget(
         widget.file,
         fit: BoxFit.contain,
+        shouldShowVideoOverlayIcon: false,
       ),
     );
   }