Delay showing CircularProgressIndicators.

lib/app/views/app_loading_screen.dart

@@ -1,31 +0,0 @@
-/*
- * Copyright (C) 2022 Yubico.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *       http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import 'package:flutter/material.dart';
-
-class AppLoadingScreen extends StatelessWidget {
-  const AppLoadingScreen({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: const [
-        Center(child: CircularProgressIndicator()),
-      ],
-    );
-  }
-}

lib/app/views/app_page.dart

@@ -16,6 +16,7 @@
 
 import 'package:flutter/material.dart';
 
+import '../../widgets/delayed_visibility.dart';
 import 'device_button.dart';
 import 'keys.dart';
 import 'main_drawer.dart';
@@ -27,6 +28,7 @@ class AppPage extends StatelessWidget {
   final List<PopupMenuEntry> keyActions;
   final bool centered;
   final Widget Function(List<PopupMenuEntry>)? actionButtonBuilder;
+  final bool delayedContent;
   const AppPage({
     super.key,
     this.title,
@@ -35,6 +37,7 @@ class AppPage extends StatelessWidget {
     this.keyActions = const [],
     this.centered = false,
     this.actionButtonBuilder,
+    this.delayedContent = false,
   });
 
   @override
@@ -65,30 +68,36 @@ class AppPage extends StatelessWidget {
       );
 
   Widget _buildScrollView() {
+    final content = Column(
+      children: [
+        child,
+        if (actions.isNotEmpty)
+          Align(
+            alignment: centered ? Alignment.center : Alignment.centerLeft,
+            child: Padding(
+              padding:
+                  const EdgeInsets.symmetric(vertical: 16.0, horizontal: 18.0),
+              child: Wrap(
+                spacing: 4,
+                runSpacing: 4,
+                children: actions,
+              ),
+            ),
+          ),
+      ],
+    );
     return SingleChildScrollView(
       child: SafeArea(
         child: Center(
           child: SizedBox(
             width: 700,
-            child: Column(
+            child: delayedContent
-              children: [
+                ? DelayedVisibility(
-                child,
+                    key: GlobalKey(), // Ensure we reset the delay on rebuild
-                if (actions.isNotEmpty)
+                    delay: const Duration(milliseconds: 400),
-                  Align(
+                    child: content,
-                    alignment:
+                  )
-                        centered ? Alignment.center : Alignment.centerLeft,
+                : content,
-                    child: Padding(
-                      padding: const EdgeInsets.symmetric(
-                          vertical: 16.0, horizontal: 18.0),
-                      child: Wrap(
-                        spacing: 4,
-                        runSpacing: 4,
-                        children: actions,
-                      ),
-                    ),
-                  ),
-              ],
-            ),
           ),
         ),
       ),

lib/app/views/main_page.dart

@@ -104,6 +104,7 @@ class MainPage extends ConsumerWidget {
         );
       } else {
         return MessagePage(
+          delayedContent: true,
           graphic: noKeyImage,
           message: 'Insert your YubiKey',
         );

lib/app/views/message_page.dart

@@ -26,6 +26,7 @@ class MessagePage extends StatelessWidget {
   final List<Widget> actions;
   final List<PopupMenuEntry> keyActions;
   final Widget Function(List<PopupMenuEntry> keyActions)? actionButtonBuilder;
+  final bool delayedContent;
 
   const MessagePage({
     super.key,
@@ -36,6 +37,7 @@ class MessagePage extends StatelessWidget {
     this.actions = const [],
     this.keyActions = const [],
     this.actionButtonBuilder,
+    this.delayedContent = false,
   });
 
   @override
@@ -45,6 +47,7 @@ class MessagePage extends StatelessWidget {
         actions: actions,
         keyActions: keyActions,
         actionButtonBuilder: actionButtonBuilder,
+        delayedContent: delayedContent,
         child: Padding(
           padding: const EdgeInsets.all(8.0),
           child: Column(

lib/desktop/init.dart

@@ -40,7 +40,6 @@ import '../app/models.dart';
 import '../app/state.dart';
 import '../management/state.dart';
 import '../version.dart';
-import '../widgets/delayed_visibility.dart';
 import 'fido/state.dart';
 import 'management/state.dart';
 import 'oath/state.dart';
@@ -280,10 +279,8 @@ class _HelperWaiterState extends ConsumerState<_HelperWaiter> {
       );
     } else {
       return const MessagePage(
-        graphic: DelayedVisibility(
+        delayedContent: true,
-          delay: Duration(seconds: 1),
+        graphic: CircularProgressIndicator(),
-          child: CircularProgressIndicator(),
-        ),
       );
     }
   }

lib/fido/views/fido_screen.dart

@@ -20,7 +20,6 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../../app/models.dart';
 import '../../app/views/app_failure_page.dart';
-import '../../app/views/app_loading_screen.dart';
 import '../../app/views/app_page.dart';
 import '../../app/views/graphics.dart';
 import '../../app/views/message_page.dart';
@@ -39,7 +38,8 @@ class FidoScreen extends ConsumerWidget {
           loading: () => AppPage(
                 title: Text(AppLocalizations.of(context)!.fido_webauthn),
                 centered: true,
-                child: const AppLoadingScreen(),
+                delayedContent: true,
+                child: const CircularProgressIndicator(),
               ),
           error: (error, _) {
             final supported = deviceData

lib/fido/views/unlocked_page.dart

@@ -169,6 +169,7 @@ class FidoUnlockedPage extends ConsumerWidget {
   Widget _buildLoadingPage(BuildContext context) => AppPage(
         title: Text(AppLocalizations.of(context)!.fido_webauthn),
         centered: true,
+        delayedContent: true,
         child: const CircularProgressIndicator(),
       );
 

lib/management/views/management_screen.dart

@@ -21,9 +21,9 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../../app/message.dart';
 import '../../app/models.dart';
-import '../../app/views/app_loading_screen.dart';
 import '../../core/models.dart';
 import '../../widgets/custom_icons.dart';
+import '../../widgets/delayed_visibility.dart';
 import '../../widgets/responsive_dialog.dart';
 import '../models.dart';
 import '../state.dart';
@@ -269,7 +269,11 @@ class _ManagementScreenState extends ConsumerState<ManagementScreen> {
     final child = ref
         .watch(managementStateProvider(widget.deviceData.node.path))
         .when(
-          loading: () => const AppLoadingScreen(),
+          loading: () => const Center(
+              child: DelayedVisibility(
+            delay: Duration(milliseconds: 200),
+            child: CircularProgressIndicator(),
+          )),
           error: (error, _) => Center(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,

lib/oath/views/oath_screen.dart

@@ -20,14 +20,12 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:yubico_authenticator/widgets/delayed_visibility.dart';
 
 import '../../app/message.dart';
 import '../../app/models.dart';
 import '../../app/shortcuts.dart';
 import '../../app/state.dart';
 import '../../app/views/app_failure_page.dart';
-import '../../app/views/app_loading_screen.dart';
 import '../../app/views/app_page.dart';
 import '../../app/views/graphics.dart';
 import '../../app/views/message_page.dart';
@@ -49,10 +47,10 @@ class OathScreen extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return ref.watch(oathStateProvider(devicePath)).when(
-          loading: () => AppPage(
+          loading: () => MessagePage(
             title: Text(AppLocalizations.of(context)!.oath_authenticator),
-            centered: true,
+            graphic: const CircularProgressIndicator(),
-            child: const AppLoadingScreen(),
+            delayedContent: true,
           ),
           error: (error, _) => AppFailurePage(
             title: Text(AppLocalizations.of(context)!.oath_authenticator),
@@ -204,6 +202,7 @@ class _UnlockedViewState extends ConsumerState<_UnlockedView> {
           used: numCreds ?? 0,
         ),
         centered: numCreds == null,
+        delayedContent: numCreds == null,
         child: numCreds != null
             ? Consumer(
                 builder: (context, ref, _) {
@@ -212,10 +211,7 @@ class _UnlockedViewState extends ConsumerState<_UnlockedView> {
                   );
                 },
               )
-            : const DelayedVisibility(
+            : const CircularProgressIndicator(),
-                delay: Duration(milliseconds: 200),
-                child: CircularProgressIndicator(),
-              ),
       ),
     );
   }