💫 Better loading animation

lib/screens/account/preferences/notifications.dart

@@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
 import 'package:get/get.dart';
 import 'package:get/get_connect/http/src/exceptions/exceptions.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:solian/exceptions/request.dart';
 import 'package:solian/exts.dart';
 import 'package:solian/providers/auth.dart';
+import 'package:solian/widgets/loading_indicator.dart';
 
 class NotificationPreferencesScreen extends StatefulWidget {
   const NotificationPreferencesScreen({super.key});
@@ -76,7 +76,7 @@ class _NotificationPreferencesScreenState
   Widget build(BuildContext context) {
     return Column(
       children: [
-        if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+        LoadingIndicator(isActive: _isBusy),
         ListTile(
           tileColor: Theme.of(context).colorScheme.surfaceContainer,
           contentPadding: const EdgeInsets.symmetric(horizontal: 24),

lib/screens/account/preferences/security.dart

@@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:flutter_animate/flutter_animate.dart';
 import 'package:get/get.dart';
 import 'package:get/get_connect/http/src/exceptions/exceptions.dart';
 import 'package:solian/exceptions/request.dart';
 import 'package:solian/exts.dart';
 import 'package:solian/providers/auth.dart';
+import 'package:solian/widgets/loading_indicator.dart';
 
 class AuthPreferencesScreen extends StatefulWidget {
   const AuthPreferencesScreen({super.key});
@@ -67,7 +67,7 @@ class _AuthPreferencesScreenState extends State<AuthPreferencesScreen> {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+        LoadingIndicator(isActive: _isBusy),
         ListTile(
           tileColor: Theme.of(context).colorScheme.surfaceContainer,
           contentPadding: const EdgeInsets.symmetric(horizontal: 24),

lib/screens/account/profile_edit.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
 import 'package:gap/gap.dart';
 import 'package:get/get.dart';
 import 'package:image_cropper/image_cropper.dart';
@@ -12,6 +11,7 @@ import 'package:solian/providers/auth.dart';
 import 'package:solian/providers/content/attachment.dart';
 import 'package:solian/services.dart';
 import 'package:solian/widgets/account/account_avatar.dart';
+import 'package:solian/widgets/loading_indicator.dart';
 
 class PersonalizeScreen extends StatefulWidget {
   const PersonalizeScreen({super.key});
@@ -188,7 +188,7 @@ class _PersonalizeScreenState extends State<PersonalizeScreen> {
 
     return ListView(
       children: [
-        if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+        LoadingIndicator(isActive: _isBusy),
         const Gap(24),
         Stack(
           children: [

lib/screens/channel/channel_organize.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';
@@ -9,6 +8,7 @@ import 'package:solian/providers/content/channel.dart';
 import 'package:solian/router.dart';
 import 'package:solian/theme.dart';
 import 'package:solian/widgets/app_bar_title.dart';
+import 'package:solian/widgets/loading_indicator.dart';
 import 'package:solian/widgets/root_container.dart';
 import 'package:uuid/uuid.dart';
 
@@ -132,7 +132,7 @@ class _ChannelOrganizeScreenState extends State<ChannelOrganizeScreen> {
           top: false,
           child: Column(
             children: [
-              if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+              LoadingIndicator(isActive: _isBusy),
               if (widget.edit != null)
                 MaterialBanner(
                   leading: const Icon(Icons.edit),

lib/screens/chat.dart

@@ -288,7 +288,7 @@ class _ChatListState extends State<ChatList> {
               return Column(
                 children: [
                   const ChatCallCurrentIndicator(),
-                  if (_isBusy) const LoadingIndicator(),
+                  LoadingIndicator(isActive: _isBusy),
                   Expanded(
                     child: TabBarView(
                       children: [

lib/screens/posts/post_editor.dart

@@ -16,6 +16,7 @@ import 'package:solian/router.dart';
 import 'package:solian/theme.dart';
 import 'package:solian/widgets/app_bar_leading.dart';
 import 'package:solian/widgets/app_bar_title.dart';
+import 'package:solian/widgets/loading_indicator.dart';
 import 'package:solian/widgets/markdown_text_content.dart';
 import 'package:solian/widgets/posts/post_item.dart';
 import 'package:badges/badges.dart' as badges;
@@ -274,7 +275,7 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
                   ),
                 ],
               ),
-            if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+            LoadingIndicator(isActive: _isBusy),
             Expanded(
               child: DefaultTabController(
                 length: 2,

lib/screens/posts/post_search.dart

@@ -135,7 +135,7 @@ class _PostSearchScreenState extends State<PostSearchScreen> {
               },
             ),
           ),
-          if (_isBusy) const LoadingIndicator(),
+          LoadingIndicator(isActive: _isBusy),
           Expanded(
             child: RefreshIndicator(
               onRefresh: () => Future.sync(() => _pagingController.refresh()),

lib/screens/realms.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/realm.dart';
@@ -15,6 +14,7 @@ import 'package:solian/widgets/app_bar_leading.dart';
 import 'package:solian/widgets/app_bar_title.dart';
 import 'package:solian/widgets/auto_cache_image.dart';
 import 'package:solian/widgets/current_state_action.dart';
+import 'package:solian/widgets/loading_indicator.dart';
 import 'package:solian/widgets/root_container.dart';
 import 'package:solian/widgets/sized_container.dart';
 
@@ -93,7 +93,7 @@ class _RealmListScreenState extends State<RealmListScreen> {
 
           return Column(
             children: [
-              if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+              LoadingIndicator(isActive: _isBusy),
               Expanded(
                 child: CenteredContainer(
                   child: RefreshIndicator(

lib/screens/realms/realm_organize.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
 import 'package:get/get.dart';
 import 'package:image_cropper/image_cropper.dart';
 import 'package:image_picker/image_picker.dart';
@@ -13,6 +12,7 @@ import 'package:solian/router.dart';
 import 'package:solian/theme.dart';
 import 'package:solian/widgets/app_bar_leading.dart';
 import 'package:solian/widgets/app_bar_title.dart';
+import 'package:solian/widgets/loading_indicator.dart';
 import 'package:solian/widgets/root_container.dart';
 import 'package:uuid/uuid.dart';
 
@@ -208,7 +208,7 @@ class _RealmOrganizeScreenState extends State<RealmOrganizeScreen> {
           top: false,
           child: Column(
             children: [
-              if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+              LoadingIndicator(isActive: _isBusy),
               if (widget.edit != null)
                 MaterialBanner(
                   leading: const Icon(Icons.edit),

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: [

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),

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: [

lib/widgets/loading_indicator.dart

@@ -1,15 +1,70 @@
 import 'package:flutter/material.dart';
-import 'package:gap/gap.dart';
 import 'package:get/get.dart';
+import 'package:gap/gap.dart';
 
-class LoadingIndicator extends StatelessWidget {
+class LoadingIndicator extends StatefulWidget {
-  const LoadingIndicator({super.key});
+  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(
+    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),
+        color:
+            Theme.of(context).colorScheme.surfaceContainerLow.withOpacity(0.5),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
           crossAxisAlignment: CrossAxisAlignment.center,
@@ -20,9 +75,10 @@ class LoadingIndicator extends StatelessWidget {
               child: CircularProgressIndicator(strokeWidth: 2.5),
             ),
             const Gap(8),
-          Text('loading'.tr)
+            Text('loading'.tr),
           ],
         ),
+      ),
     );
   }
 }

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: [

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),

pubspec.yaml

@@ -2,7 +2,7 @@ name: solian
 description: "The Solar Network App"
 publish_to: "none"
 
-version: 1.3.8+12
+version: 1.3.8+13
 
 environment:
   sdk: ">=3.3.4 <4.0.0"