examples/stackoverflow: Fast Scroll/Small Page Size will cause App to hang

[ened]

Describe the bug

I try to understand the stackoverflow example, specifically how the pagination is done. The forked version of the repo is here: https://github.com/ened/river_pod/tree/examples/stackoverflow/pageSize5

The page size was changed to 5 and I started scrolling quickly. This caused a few errors and eventually, the App is not loading any new data.

Expected behavior

• Open requests to missing pages should load appropriately and backfill what is missing.
• App should never hang and stop loading

[rrousselGit]

This caused a few errors and eventually, the App is not loading any new data.

What error?

[ened]

Errors like:

Exception has occurred.
DioError (DioError [DioErrorType.cancel]: 
Source stack:
#0      DioMixin.fetch (package:dio/src/dio_mixin.dart:473:35)
#1      DioMixin.request (package:dio/src/dio_mixin.dart:468:12)
#2      DioMixin.requestUri (package:dio/src/dio_mixin.dart:422:12)
#3      DioMixin.getUri (package:dio/src/dio_mixin.dart:72:12)
#4      paginatedQuestionsProvider.<anonymous closure> (package:stackoverflow/home.dart:79:8)
#5      paginatedQuestionsProvider.<anonymous closure> (package:stackoverflow/home.dart:54:37)
#6      AutoDisposeFutureProviderFamily.create.<anonymous closure> (package:riverpod/src/future_provider/auto_dispose.dart:132:23)
#7      AutoDisposeFutureProvider.create.<anonymous closure> (package:riverpod/src/future_provider/auto_dispose.dart:68:43)
#8      _FutureProviderElementMixin._listenFuture (package:riverpod/src/future_provider.dart:89:27)
#9      AutoDisposeFutureProvider.create (package:riverpod/src/future_provider/auto_dispose.dart:68:16)
#10     ProviderElementBase._buildState (package:riverpod/src/framework/provider_base.dart:476:26)
#11     AutoDisposeProviderElementBase._buildState (package:riverpod/src/framework/auto_dispose.dart:152:11)
#12     ProviderElementBase.mount (package:riverpod/src/framework/provider_base.dart:348:5)
#13     _StateReader._create (package:riverpod/src/framework/container.dart:104:11)
#14     _StateReader.getElement (package:riverpod/src/framework/container.dart:92:52)
#15     ProviderContainer.readProviderElement.<anonymous closure> (package:riverpod/src/framework/container.dart:490:38)
#16     ProviderContainer.readProviderElement (package:riverpod/src/framework/container.dart:523:6)

════════ Exception caught by image resource service ════════════════════════════
The following HandshakeException was thrown resolving an image codec:
Connection terminated during handshake

When the exception was thrown, this was the stack
Image provider: NetworkImage("[https://lh3.googleusercontent.com/a/AATXAJwfy-25HkvYx5KfDm8sxqtm0yMCLIoLgxTofHrJ=k-s256]()", scale: 1.0)
Image key: NetworkImage("[https://lh3.googleusercontent.com/a/AATXAJwfy-25HkvYx5KfDm8sxqtm0yMCLIoLgxTofHrJ=k-s256]()", scale: 1.0)
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by image resource service ════════════════════════════
Connection terminated during handshake
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by image resource service ════════════════════════════

If waited for long enough (or release build) the errors seem to have no impact yet interrupt the development workflow.

[ened]

If waited for long enough (or release build) the errors seem to have no impact yet interrupt the development workflow.

Correction this now stopped loading on this screen:

[rrousselGit]

The first exception "dio.cancel" shouldn't happen anymore

The second one makes it sounds like you had some network resource issues. Maybe too many requests were made at the same time due to the small page side.

[rrousselGit]

Closing that the Riverpod error shouldn't happen anymore. (well the exception should be thrown, but that's on purpose. On the other hand, it shouldn't be considered "uncaught")