💫 Better loading animation

2024-10-14 21:13:57 +08:00
parent 1abc65f8fa
commit 77288713e1
16 changed files with 101 additions and 43 deletions
--- a/lib/widgets/attachments/attachment_editor.dart
+++ b/lib/widgets/attachments/attachment_editor.dart
@ -21,6 +21,7 @@ import 'package:solian/providers/content/attachment.dart';
 import 'package:solian/widgets/attachments/attachment_attr_editor.dart';
 import 'package:solian/widgets/attachments/attachment_editor_thumbnail.dart';
 import 'package:solian/widgets/attachments/attachment_fullscreen.dart';
+import 'package:solian/widgets/loading_indicator.dart';

 class AttachmentEditorPopup extends StatefulWidget {
  final String pool;
@ -660,7 +661,7 @@ class _AttachmentEditorPopupState extends State<AttachmentEditorPopup> {
                ),
              ],
            ).paddingOnly(left: 24, right: 24, top: 32, bottom: 16),
-            if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+            LoadingIndicator(isActive: _isBusy),
            Expanded(
              child: CustomScrollView(
                slivers: [
--- a/lib/widgets/channel/channel_member.dart
+++ b/lib/widgets/channel/channel_member.dart
@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
 import 'package:get/get.dart';
 import 'package:solian/exts.dart';
 import 'package:solian/models/channel.dart';
@ -8,6 +7,7 @@ import 'package:solian/services.dart';
 import 'package:solian/widgets/account/account_avatar.dart';
 import 'package:solian/widgets/account/account_profile_popup.dart';
 import 'package:solian/widgets/account/relative_select.dart';
+import 'package:solian/widgets/loading_indicator.dart';

 class ChannelMemberListPopup extends StatefulWidget {
  final Channel channel;
@ -131,7 +131,7 @@ class _ChannelMemberListPopupState extends State<ChannelMemberListPopup> {
            'channelMembers'.tr,
            style: Theme.of(context).textTheme.headlineSmall,
          ).paddingOnly(left: 24, right: 24, top: 32, bottom: 16),
-          if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+          LoadingIndicator(isActive: _isBusy),
          ListTile(
            tileColor: Theme.of(context).colorScheme.surfaceContainerHigh,
            contentPadding: const EdgeInsets.symmetric(horizontal: 20),
--- a/lib/widgets/chat/chat_event_action.dart
+++ b/lib/widgets/chat/chat_event_action.dart
@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:get/get.dart';
 import 'package:solian/models/channel.dart';
@ -7,6 +6,7 @@ import 'package:solian/models/event.dart';
 import 'package:solian/models/realm.dart';
 import 'package:solian/providers/auth.dart';
 import 'package:solian/widgets/chat/chat_event_deletion.dart';
+import 'package:solian/widgets/loading_indicator.dart';

 class ChatEventAction extends StatefulWidget {
  final Channel channel;
@ -73,7 +73,7 @@ class _ChatEventActionState extends State<ChatEventAction> {
              ),
            ],
          ).paddingOnly(left: 24, right: 24, top: 32, bottom: 16),
-          if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+          LoadingIndicator(isActive: _isBusy),
          Expanded(
            child: ListView(
              children: [
--- a/lib/widgets/loading_indicator.dart
+++ b/lib/widgets/loading_indicator.dart
@ -1,27 +1,83 @@
 import 'package:flutter/material.dart';
-import 'package:gap/gap.dart';
 import 'package:get/get.dart';
+import 'package:gap/gap.dart';

-class LoadingIndicator extends StatelessWidget {
-  const LoadingIndicator({super.key});
+class LoadingIndicator extends StatefulWidget {
+  final bool isActive;
+
+  const LoadingIndicator({super.key, this.isActive = true});
+
+  @override
+  State<LoadingIndicator> createState() => _LoadingIndicatorState();
+}
+
+class _LoadingIndicatorState extends State<LoadingIndicator>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _animation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 300),
+    );
+
+    _animation = CurvedAnimation(
+      parent: _controller,
+      curve: Curves.easeInOut,
+    );
+
+    if (widget.isActive) {
+      _controller.forward();
+    } else {
+      _controller.reverse();
+    }
+  }
+
+  @override
+  void didUpdateWidget(covariant LoadingIndicator oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    if (widget.isActive != oldWidget.isActive) {
+      if (widget.isActive) {
+        _controller.forward();
+      } else {
+        _controller.reverse();
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }

  @override
  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
-      color: Theme.of(context).colorScheme.surfaceContainerLow.withOpacity(0.5),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.center,
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: [
-          const SizedBox(
-            height: 16,
-            width: 16,
-            child: CircularProgressIndicator(strokeWidth: 2.5),
-          ),
-          const Gap(8),
-          Text('loading'.tr)
-        ],
+    return SizeTransition(
+      sizeFactor: _animation,
+      axisAlignment: -1, // Align animation from the top
+      child: Container(
+        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
+        color:
+            Theme.of(context).colorScheme.surfaceContainerLow.withOpacity(0.5),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            const SizedBox(
+              height: 16,
+              width: 16,
+              child: CircularProgressIndicator(strokeWidth: 2.5),
+            ),
+            const Gap(8),
+            Text('loading'.tr),
+          ],
+        ),
      ),
    );
  }
--- a/lib/widgets/posts/post_action.dart
+++ b/lib/widgets/posts/post_action.dart
@ -3,7 +3,6 @@ import 'dart:math';
 import 'package:file_saver/file_saver.dart';
 import 'package:firebase_analytics/firebase_analytics.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:get/get.dart';
 import 'package:screenshot/screenshot.dart';
@ -14,6 +13,7 @@ import 'package:solian/platform.dart';
 import 'package:solian/providers/auth.dart';
 import 'package:solian/router.dart';
 import 'package:solian/screens/posts/post_editor.dart';
+import 'package:solian/widgets/loading_indicator.dart';
 import 'package:solian/widgets/posts/post_share.dart';
 import 'package:solian/widgets/reports/abuse_report.dart';

@ -182,7 +182,7 @@ class _PostActionState extends State<PostAction> {
              ),
            ],
          ).paddingOnly(left: 24, right: 24, top: 32, bottom: 16),
-          if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+          LoadingIndicator(isActive: _isBusy),
          Expanded(
            child: ListView(
              children: [
--- a/lib/widgets/realms/realm_member.dart
+++ b/lib/widgets/realms/realm_member.dart
@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
 import 'package:get/get.dart';
 import 'package:solian/exts.dart';
 import 'package:solian/models/realm.dart';
@ -8,6 +7,7 @@ import 'package:solian/services.dart';
 import 'package:solian/widgets/account/account_avatar.dart';
 import 'package:solian/widgets/account/account_profile_popup.dart';
 import 'package:solian/widgets/account/relative_select.dart';
+import 'package:solian/widgets/loading_indicator.dart';

 class RealmMemberListPopup extends StatefulWidget {
  final Realm realm;
@ -128,7 +128,7 @@ class _RealmMemberListPopupState extends State<RealmMemberListPopup> {
            'realmMembers'.tr,
            style: Theme.of(context).textTheme.headlineSmall,
          ).paddingOnly(left: 24, right: 24, top: 32, bottom: 16),
-          if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+          LoadingIndicator(isActive: _isBusy),
          ListTile(
            tileColor: Theme.of(context).colorScheme.surfaceContainerHigh,
            contentPadding: const EdgeInsets.symmetric(horizontal: 20),