perf: defer initial data fetching to microtasks and update loading placeholders for smoother screen transitions
This commit is contained in:
@@ -206,7 +206,8 @@ class _AboutState {
|
|||||||
|
|
||||||
class _AboutNotifier extends StateNotifier<_AboutState> {
|
class _AboutNotifier extends StateNotifier<_AboutState> {
|
||||||
_AboutNotifier() : super(const _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 {
|
Future<void> _load() async {
|
||||||
@@ -304,9 +305,18 @@ class AboutScreen extends ConsumerWidget {
|
|||||||
final state = ref.watch(_aboutProvider);
|
final state = ref.watch(_aboutProvider);
|
||||||
|
|
||||||
if (state.isLoading) {
|
if (state.isLoading) {
|
||||||
return const Center(
|
// Full-size placeholder so slide-in transition doesn't pop blank
|
||||||
child: CircularProgressIndicator(
|
return Container(
|
||||||
color: AppColors.accentOrange,
|
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,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -449,7 +449,10 @@ class AgentDetailNotifier extends StateNotifier<AgentDetailState> {
|
|||||||
|
|
||||||
AgentDetailNotifier(this._repo, this.agentId)
|
AgentDetailNotifier(this._repo, this.agentId)
|
||||||
: super(const AgentDetailState()) {
|
: 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)
|
// Listen for real-time connection response (accepted/rejected)
|
||||||
_connectionResponseSub =
|
_connectionResponseSub =
|
||||||
SocketService().onConnectionResponse.listen((_) {
|
SocketService().onConnectionResponse.listen((_) {
|
||||||
|
|||||||
@@ -45,8 +45,21 @@ class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
|
|||||||
final state = ref.watch(agentDetailProvider(widget.agentId));
|
final state = ref.watch(agentDetailProvider(widget.agentId));
|
||||||
|
|
||||||
if (state.isLoading) {
|
if (state.isLoading) {
|
||||||
return const Center(
|
// Full-size placeholder with the screen's base color so the slide-in
|
||||||
child: CircularProgressIndicator(color: AppColors.accentOrange),
|
// 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) {
|
if (state.error != null) {
|
||||||
|
|||||||
@@ -122,7 +122,7 @@ class FaqState {
|
|||||||
|
|
||||||
class FaqNotifier extends StateNotifier<FaqState> {
|
class FaqNotifier extends StateNotifier<FaqState> {
|
||||||
FaqNotifier() : super(const FaqState()) {
|
FaqNotifier() : super(const FaqState()) {
|
||||||
_load();
|
Future.microtask(_load);
|
||||||
}
|
}
|
||||||
|
|
||||||
Future<void> _load() async {
|
Future<void> _load() async {
|
||||||
|
|||||||
Reference in New Issue
Block a user