Add connection info footer

lib/core/widget/animated_visibility.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/widgets.dart';
+
+class AnimatedVisibility extends StatelessWidget {
+  const AnimatedVisibility({
+    super.key,
+    required this.visible,
+    this.axis = Axis.horizontal,
+    this.padding = EdgeInsets.zero,
+    required this.child,
+  });
+
+  final bool visible;
+  final Axis axis;
+  final EdgeInsets padding;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    final replacement = axis == Axis.vertical
+        ? const SizedBox(width: double.infinity)
+        : const SizedBox.shrink();
+
+    return AnimatedSwitcher(
+      duration: const Duration(milliseconds: 200),
+      transitionBuilder: (child, animation) => SizeTransition(
+        sizeFactor: animation,
+        child: FadeTransition(opacity: animation, child: child),
+      ),
+      child: visible
+          ? AnimatedPadding(
+              padding: padding,
+              duration: const Duration(milliseconds: 200),
+              child: child,
+            )
+          : replacement,
+    );
+  }
+}

lib/core/widget/skeleton_widget.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+class Skeleton extends StatelessWidget {
+  const Skeleton({
+    this.width,
+    this.height,
+    this.widthFactor,
+    this.heightFactor,
+    this.shape = BoxShape.rectangle,
+    this.alignment = AlignmentDirectional.center,
+  });
+
+  final double? width;
+  final double? height;
+  final double? widthFactor;
+  final double? heightFactor;
+  final BoxShape shape;
+  final AlignmentGeometry alignment;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return FractionallySizedBox(
+      widthFactor: widthFactor,
+      heightFactor: heightFactor,
+      alignment: alignment,
+      child: Container(
+        width: width,
+        height: height,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+          shape: shape,
+          color: theme.hintColor.withOpacity(.16),
+        ),
+      ),
+    );
+  }
+}