Files
buzz/mobile/lib/shared/widgets/skeleton_bar.dart
klopez4212andGitHub 01c23810fa Replace mobile reconnect banners with skeleton shimmer (#3143)
## Summary
- replace mobile connecting and reconnecting banners with element-shaped
skeletons for channel lists and message timelines
- add a low-contrast two-second shimmer and same-slot reveal, with
reduced-motion support
- align top, section, loaded-row, and skeleton label columns

## Why
Connection banners shifted content and did not match the desktop loading
treatment. The skeletons preserve layout and make reconnects less
disruptive.

## Testing
- `just mobile-check`
- `just mobile-test` — 704 passed, 1 skipped
- Pixel 10 visual verification in loaded and reconnecting states

---------

Signed-off-by: kenny lopez <klopez4212@gmail.com>
2026-07-27 19:57:07 +01:00

34 lines
827 B
Dart

part of 'skeleton.dart';
/// A single rounded placeholder within a [SkeletonShimmer].
class SkeletonBar extends StatelessWidget {
final double width;
final double height;
final BorderRadius? borderRadius;
const SkeletonBar({
required this.width,
required this.height,
this.borderRadius,
super.key,
});
@override
Widget build(BuildContext context) {
return ExcludeSemantics(
child: SizedBox(
width: width,
height: height,
child: DecoratedBox(
decoration: BoxDecoration(
color: _SkeletonMask.isActive(context)
? Colors.white
: context.colors.primary.withValues(alpha: _skeletonOpacity),
borderRadius: borderRadius ?? BorderRadius.circular(Radii.sm),
),
),
),
);
}
}