feat: add timeouts to loading overlay [#142] (#144)

* feat: add timeouts to loading overlay [#142]

* fix: remove unnecessary logging import [#142]

* fix: add tests [#142]

* fix: ensure overlay count can't go below zero [#142]

* fix: pr changes

* fix: add test report to automation

---------

Co-authored-by: Simon Lightfoot <[email protected]>

Author: shinyford

.github/workflows/main.yaml

@@ -52,5 +52,17 @@ jobs:
           echo $TEST_ENV_BASE64 | base64 --decode > packages/clerk_auth/.env.test
 
       - name: Run tests in clerk_auth
-        run: dart test
+        run: dart test --file-reporter=json:../../reports/clerk_auth.json
         working-directory: packages/clerk_auth
+
+      - name: Run tests in clerk_flutter
+        run: flutter test --file-reporter=json:../../reports/clerk_flutter.json
+        working-directory: packages/clerk_flutter
+
+      - name: Test Report
+        uses: dorny/test-reporter@v1
+        if: success() || failure()    # run this step even if previous step failed
+        with:
+          name: 'Test Report'         # Name of the check run which will be created
+          path: reports/*.json        # Path to test results
+          reporter: flutter-json      # Format of test results

packages/clerk_flutter/lib/src/clerk_auth_state.dart

@@ -4,6 +4,7 @@ import 'package:clerk_auth/clerk_auth.dart' as clerk;
 import 'package:clerk_flutter/clerk_flutter.dart';
 import 'package:clerk_flutter/src/utils/localization_extensions.dart';
 import 'package:clerk_flutter/src/widgets/ui/clerk_loading_overlay.dart';
+import 'package:clerk_flutter/src/widgets/ui/clerk_overlay_host.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:path_provider/path_provider.dart';
@@ -177,13 +178,14 @@ class ClerkAuthState extends clerk.Auth with ChangeNotifier {
     ClerkErrorCallback? onError,
   }) async {
     T? result;
-    _loadingOverlay.show(context);
+    final overlay = ClerkOverlay.of(context);
+    _loadingOverlay.insertInto(overlay);
     try {
       result = await fn();
     } on clerk.AuthError catch (error) {
       _onError(error, onError);
     } finally {
-      _loadingOverlay.hide();
+      _loadingOverlay.removeFrom(overlay);
     }
     return result;
   }

packages/clerk_flutter/lib/src/utils/clerk_auth_config.dart

@@ -1,6 +1,8 @@
 import 'package:clerk_auth/clerk_auth.dart' as clerk;
 import 'package:clerk_flutter/clerk_flutter.dart';
 import 'package:clerk_flutter/src/generated/clerk_sdk_localizations_en.dart';
+import 'package:clerk_flutter/src/widgets/ui/common.dart'
+    show defaultLoadingWidget;
 import 'package:flutter/material.dart';
 
 /// A map of [Locale] strings to [ClerkSdkLocalizations] instances
@@ -23,7 +25,7 @@ class ClerkAuthConfig extends clerk.AuthConfig {
     super.telemetryPeriod,
     super.clientRefreshPeriod,
     ClerkSdkLocalizationsCollection? localizations,
-    this.loading,
+    this.loading = defaultLoadingWidget,
   }) : _localizations = localizations;
 
   static ClerkSdkLocalizationsCollection get _defaultLocalizations =>
@@ -34,7 +36,8 @@ class ClerkAuthConfig extends clerk.AuthConfig {
       _localizations ?? _defaultLocalizations;
   final ClerkSdkLocalizationsCollection? _localizations;
 
-  /// The [Widget] to display while loading data
+  /// The [Widget] to display while loading data, override with null
+  /// to disable the loading overlay or use your own widget.
   final Widget? loading;
 
   @override

packages/clerk_flutter/lib/src/widgets/control/clerk_auth.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:clerk_auth/clerk_auth.dart' as clerk;
 import 'package:clerk_flutter/clerk_flutter.dart';
 import 'package:clerk_flutter/src/utils/clerk_telemetry.dart';
+import 'package:clerk_flutter/src/widgets/ui/clerk_overlay_host.dart';
 import 'package:clerk_flutter/src/widgets/ui/common.dart';
 import 'package:flutter/material.dart';
 
@@ -132,7 +133,9 @@ class _ClerkAuthState extends State<ClerkAuth> with ClerkTelemetryStateMixin {
         builder: (BuildContext context, Widget? child) {
           return _ClerkAuthData(
             authState: authState,
-            child: widget.child,
+            child: ClerkOverlayHost(
+              child: widget.child,
+            ),
           );
         },
       );

packages/clerk_flutter/lib/src/widgets/ui/clerk_loading_overlay.dart

@@ -1,27 +1,79 @@
+import 'dart:async';
+
 import 'package:clerk_flutter/src/utils/clerk_auth_config.dart';
-import 'package:clerk_flutter/src/widgets/ui/common.dart';
+import 'package:clerk_flutter/src/widgets/ui/clerk_overlay_host.dart';
 import 'package:flutter/widgets.dart';
 
 /// Clerk Loading Overlay
 class ClerkLoadingOverlay {
   /// Constructs a [ClerkLoadingOverlay]
-  ClerkLoadingOverlay(ClerkAuthConfig config)
-      : _overlayEntry = OverlayEntry(
-          builder: (context) => config.loading ?? defaultLoadingWidget,
-        );
+  ClerkLoadingOverlay(ClerkAuthConfig config) : _loadingWidget = config.loading;
+
+  /// The delay between an [insertInto] call and the loading overlay
+  /// being displayed
+  static const startupDuration = Duration(milliseconds: 300);
+
+  /// The minimum amount of time the loading overlay should remain
+  /// on screen for
+  static const minimumOnScreenDuration = Duration(milliseconds: 800);
+
+  /// The number of [ClerkLoadingOverlay] requests that are currently
+  /// pending
+  int count = 0;
+
+  Timer? _displayTimer;
+  Timer? _hideTimer;
+  DateTime _hideAfter = DateTime(0);
 
-  final OverlayEntry _overlayEntry;
+  final Widget? _loadingWidget;
 
   /// Shows the loading overlay
-  void show(BuildContext context) {
-    final overlay = Overlay.of(context);
-    if (overlay.context.mounted && _overlayEntry.mounted == false) {
-      overlay.insert(_overlayEntry);
+  void insertInto(ClerkOverlay overlay) {
+    // no overlay widget was supplied so we dont try and display it
+    if (_loadingWidget == null) {
+      return;
+    }
+    // make the display of loading indicator reentrant
+    if (++count == 1) {
+      _hideTimer?.cancel();
+      _hideTimer = null;
+      _displayTimer ??= Timer(
+        startupDuration,
+        () {
+          if (!overlay.isDisplaying(_loadingWidget!)) {
+            _hideAfter = DateTime.timestamp().add(minimumOnScreenDuration);
+            overlay.insert(_loadingWidget!);
+          }
+        },
+      );
     }
   }
 
   /// Hides the loading overlay
-  void hide() {
-    _overlayEntry.remove();
+  void removeFrom(ClerkOverlay overlay) {
+    // no overlay widget was supplied so we dont try and remove it
+    if (_loadingWidget == null) {
+      return;
+    }
+    // make the display of loading indicator reentrant
+    if (count > 0 && --count == 0) {
+      _displayTimer?.cancel();
+      _displayTimer = null;
+
+      if (_hideTimer == null && overlay.isDisplaying(_loadingWidget!)) {
+        final now = DateTime.timestamp();
+        if (_hideAfter.isBefore(now)) {
+          overlay.remove(_loadingWidget!);
+        } else {
+          _hideTimer = Timer(
+            _hideAfter.difference(now),
+            () {
+              _hideTimer = null;
+              overlay.remove(_loadingWidget!);
+            },
+          );
+        }
+      }
+    }
   }
 }

packages/clerk_flutter/lib/src/widgets/ui/clerk_overlay_host.dart

@@ -0,0 +1,66 @@
+import 'package:flutter/widgets.dart';
+
+/// Abstract class to provide access to displaying an overlay
+abstract class ClerkOverlay<T extends StatefulWidget> extends State<T> {
+  /// Insert an [Widget]
+  void insert(Widget overlay);
+
+  /// Remove an [Widget]
+  void remove(Widget overlay);
+
+  /// Is the [Widget] on display?
+  bool isDisplaying(Widget overlay);
+
+  /// Find the overlay host in widget tree
+  static ClerkOverlay of(BuildContext context) {
+    return context.findAncestorStateOfType<ClerkOverlay>()!;
+  }
+}
+
+/// Displays widgets overlaying content of [child]
+class ClerkOverlayHost extends StatefulWidget {
+  /// Constructs a [ClerkOverlayHost]
+  const ClerkOverlayHost({
+    super.key,
+    required this.child,
+  });
+
+  /// Child widget to wrap
+  final Widget child;
+
+  @override
+  State<ClerkOverlayHost> createState() => _ClerkOverlayHostState();
+}
+
+class _ClerkOverlayHostState extends State<ClerkOverlayHost>
+    implements ClerkOverlay<ClerkOverlayHost> {
+  final _overlays = <Widget>[];
+
+  @override
+  bool isDisplaying(Widget overlay) => _overlays.contains(overlay);
+
+  @override
+  void insert(Widget overlay) {
+    setState(() => _overlays.add(overlay));
+  }
+
+  @override
+  void remove(Widget overlay) {
+    setState(() => _overlays.remove(overlay));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      fit: StackFit.passthrough,
+      textDirection: TextDirection.ltr,
+      children: [
+        IgnorePointer(
+          ignoring: _overlays.isNotEmpty,
+          child: widget.child,
+        ),
+        ..._overlays,
+      ],
+    );
+  }
+}

packages/clerk_flutter/lib/src/widgets/ui/common.dart

@@ -15,9 +15,7 @@ final defaultOrgLogo = SvgPicture.asset(
   package: 'clerk_flutter',
 );
 
-const defaultLoadingWidget = SizedBox(
-  width: double.infinity,
-  height: double.infinity,
+const defaultLoadingWidget = Positioned.fill(
   child: ColoredBox(
     color: Colors.black26,
     child: Center(child: CircularProgressIndicator()),