feat(flutter): DelayedLoading wrapper for skeleton-with-delay

Renders nothing for the first [delay] (default 200ms) of sustained
loading, then renders the [whileDelayed] child until loading completes.
Mirrors the web useDelayed hook so a fast network response doesn't
flash a skeleton.

Used in the next commit's home screen rewrite; otherwise unused this
slice.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-09 11:38:42 -04:00
parent 3ac8cc9363
commit a7fcafadda
2 changed files with 142 additions and 0 deletions
@@ -0,0 +1,66 @@
import 'dart:async';
import 'package:flutter/widgets.dart';
/// Renders [whileDelayed] only after [isLoading] has been true
/// continuously for [delay], then renders [whenReady] once loading
/// completes. Mirrors the web `useDelayed` hook: a brief loading flash
/// doesn't trigger a skeleton; sustained loading does.
///
/// Once [isLoading] flips back to false, the timer resets.
class DelayedLoading extends StatefulWidget {
const DelayedLoading({
super.key,
required this.isLoading,
required this.whileDelayed,
required this.whenReady,
this.delay = const Duration(milliseconds: 200),
});
final bool isLoading;
final Widget whileDelayed;
final Widget whenReady;
final Duration delay;
@override
State<DelayedLoading> createState() => _DelayedLoadingState();
}
class _DelayedLoadingState extends State<DelayedLoading> {
Timer? _timer;
bool _delayPassed = false;
@override
void initState() {
super.initState();
_maybeStart();
}
@override
void didUpdateWidget(DelayedLoading old) {
super.didUpdateWidget(old);
if (widget.isLoading != old.isLoading) {
_timer?.cancel();
_delayPassed = false;
_maybeStart();
}
}
void _maybeStart() {
if (!widget.isLoading) return;
_timer = Timer(widget.delay, () {
if (mounted) setState(() => _delayPassed = true);
});
}
@override
void dispose() {
_timer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
if (!widget.isLoading) return widget.whenReady;
return _delayPassed ? widget.whileDelayed : const SizedBox.shrink();
}
}
@@ -0,0 +1,76 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:minstrel/shared/delayed_loading.dart';
void main() {
testWidgets('renders nothing for the first 100ms of loading', (tester) async {
await tester.pumpWidget(const MaterialApp(
home: DelayedLoading(
isLoading: true,
delay: Duration(milliseconds: 200),
whileDelayed: Text('LOADING'),
whenReady: Text('READY'),
),
));
await tester.pump(const Duration(milliseconds: 100));
expect(find.text('LOADING'), findsNothing);
expect(find.text('READY'), findsNothing);
});
testWidgets('renders whileDelayed after delay elapses', (tester) async {
await tester.pumpWidget(const MaterialApp(
home: DelayedLoading(
isLoading: true,
delay: Duration(milliseconds: 200),
whileDelayed: Text('LOADING'),
whenReady: Text('READY'),
),
));
await tester.pump(const Duration(milliseconds: 250));
expect(find.text('LOADING'), findsOneWidget);
});
testWidgets('renders whenReady when not loading', (tester) async {
await tester.pumpWidget(const MaterialApp(
home: DelayedLoading(
isLoading: false,
whileDelayed: Text('LOADING'),
whenReady: Text('READY'),
),
));
expect(find.text('READY'), findsOneWidget);
});
testWidgets('resets timer when isLoading flips false then true', (tester) async {
await tester.pumpWidget(const MaterialApp(
home: DelayedLoading(
isLoading: true,
delay: Duration(milliseconds: 200),
whileDelayed: Text('LOADING'),
whenReady: Text('READY'),
),
));
await tester.pump(const Duration(milliseconds: 150));
// Switch to not-loading, then back to loading.
await tester.pumpWidget(const MaterialApp(
home: DelayedLoading(
isLoading: false,
whileDelayed: Text('LOADING'),
whenReady: Text('READY'),
),
));
await tester.pumpWidget(const MaterialApp(
home: DelayedLoading(
isLoading: true,
delay: Duration(milliseconds: 200),
whileDelayed: Text('LOADING'),
whenReady: Text('READY'),
),
));
// Original 150ms shouldn't carry over — at 100ms past restart
// we should still see nothing.
await tester.pump(const Duration(milliseconds: 100));
expect(find.text('LOADING'), findsNothing);
});
}