Data Loading Strategy

A key architectural decision in the web dashboard is the strategy for loading data into selection fields, such as the Country and Language dropdowns found in the content creation and editing forms.

The Challenge: UI Component Limitations

The dashboard uses the standard Flutter DropdownButtonFormField to ensure a consistent and native user experience. However, a known limitation of this widget is its lack of support for scroll detection or on-demand pagination. This makes it impossible to dynamically load more items as a user scrolls through a long list.

The Solution: Pre-Fetching with ThrottledFetchingService

To provide a seamless user experience and work around this limitation, we’ve implemented a pre-fetching strategy.

When a user navigates to a section that requires this data (like Content Management), the ContentManagementBloc dispatches an event to fetch the entire list of required items (e.g., all countries, all languages) in the background.

This process is handled by the ThrottledFetchingService, which is designed to be efficient and respectful to the API:

• It fetches the first page of data to understand the total scope.
• It then fetches the remaining pages sequentially, with a small, built-in delay between each request to avoid overwhelming the server.

The User Experience

This background fetching is designed to be as unobtrusive as possible.

• If a user opens a form before the data has finished loading, the relevant dropdown menu will be temporarily disabled.
• A helper text message, “Loading full list…”, will appear below the dropdown to inform the user that the data is on its way.
• Once the fetch is complete, the dropdown automatically becomes active, populated with the full list of options.

This approach represents a deliberate engineering tradeoff: we accept the cost of a larger initial data load in exchange for a smoother, more consistent user interface without the complexity of implementing custom dropdown components.