perf: defer initial data fetching to microtasks and update loading placeholders for smoother screen transitions

This commit is contained in:
pradeepkumar
2026-04-18 16:35:32 +05:30
parent 4a842e9098
commit dea688194f
4 changed files with 34 additions and 8 deletions

View File

@@ -206,7 +206,8 @@ class _AboutState {
class _AboutNotifier extends StateNotifier<_AboutState> {
_AboutNotifier() : super(const _AboutState()) {
_load();
// Defer CMS fetch so the first frame paints before the HTTP request
Future.microtask(_load);
}
Future<void> _load() async {
@@ -304,9 +305,18 @@ class AboutScreen extends ConsumerWidget {
final state = ref.watch(_aboutProvider);
if (state.isLoading) {
return const Center(
child: CircularProgressIndicator(
color: AppColors.accentOrange,
// Full-size placeholder so slide-in transition doesn't pop blank
return Container(
color: Colors.white,
alignment: Alignment.topCenter,
padding: const EdgeInsets.only(top: 120),
child: const SizedBox(
width: 28,
height: 28,
child: CircularProgressIndicator(
color: AppColors.accentOrange,
strokeWidth: 2.5,
),
),
);
}

View File

@@ -449,7 +449,10 @@ class AgentDetailNotifier extends StateNotifier<AgentDetailState> {
AgentDetailNotifier(this._repo, this.agentId)
: super(const AgentDetailState()) {
_load();
// Defer the network burst to the next microtask so the agent detail
// screen's first frame (loading placeholder) paints before the three
// parallel HTTP requests kick off — smoother slide-in transition.
Future.microtask(_load);
// Listen for real-time connection response (accepted/rejected)
_connectionResponseSub =
SocketService().onConnectionResponse.listen((_) {

View File

@@ -45,8 +45,21 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
final state = ref.watch(agentDetailProvider(widget.agentId));
if (state.isLoading) {
return const Center(
child: CircularProgressIndicator(color: AppColors.accentOrange),
// Full-size placeholder with the screen's base color so the slide-in
// transition doesn't pop from blank → content. Small spinner at top
// instead of centered (less attention-grabbing during navigation).
return Container(
color: Colors.white,
alignment: Alignment.topCenter,
padding: const EdgeInsets.only(top: 120),
child: const SizedBox(
width: 28,
height: 28,
child: CircularProgressIndicator(
color: AppColors.accentOrange,
strokeWidth: 2.5,
),
),
);
}
if (state.error != null) {

View File

@@ -122,7 +122,7 @@ class FaqState {
class FaqNotifier extends StateNotifier<FaqState> {
FaqNotifier() : super(const FaqState()) {
_load();
Future.microtask(_load);
}
Future<void> _load() async {