perf(neon,neon_files,neon_news,neon_notes,neon_notifications): lazy build NeonListView

Signed-off-by: Nikolas Rimikis <leptopoda@users.noreply.github.com>

packages/neon/neon/lib/src/widgets/list_view.dart

@@ -2,65 +2,85 @@ import 'package:flutter/material.dart';
 import 'package:neon/src/widgets/error.dart';
 import 'package:neon/src/widgets/linear_progress_indicator.dart';
 
-class NeonListView<T> extends StatelessWidget {
-  const NeonListView({
-    required this.items,
+class NeonListView extends StatelessWidget {
+  NeonListView({
     required this.isLoading,
     required this.error,
     required this.onRefresh,
-    required this.builder,
+    required final NullableIndexedWidgetBuilder itemBuilder,
+    final int? itemCount,
+    this.scrollKey,
+    this.topFixedChildren,
+    this.topScrollingChildren,
+    super.key,
+  }) : sliver = SliverList.builder(
+          itemCount: itemCount,
+          itemBuilder: itemBuilder,
+        );
+
+  const NeonListView.custom({
+    required this.isLoading,
+    required this.error,
+    required this.onRefresh,
+    required this.sliver,
     this.scrollKey,
-    this.withFloatingActionButton = false,
     this.topFixedChildren,
     this.topScrollingChildren,
     super.key,
   });
 
-  final Iterable<T>? items;
   final bool isLoading;
   final Object? error;
   final RefreshCallback onRefresh;
-  final Widget Function(BuildContext, T data) builder;
   final String? scrollKey;
-  final bool withFloatingActionButton;
   final List<Widget>? topFixedChildren;
   final List<Widget>? topScrollingChildren;
+  final Widget sliver;
 
   @override
-  Widget build(final BuildContext context) => RefreshIndicator(
+  Widget build(final BuildContext context) {
+    final refreshIndicatorKey = GlobalKey<RefreshIndicatorState>();
+    final hasFloatingActionButton = Scaffold.maybeOf(context)?.hasFloatingActionButton ?? false;
+
+    return RefreshIndicator.adaptive(
+      key: refreshIndicatorKey,
       onRefresh: onRefresh,
-        child: Column(
-          children: [
-            ...?topFixedChildren,
-            NeonLinearProgressIndicator(
-              margin: const EdgeInsets.symmetric(
+      child: CustomScrollView(
+        key: scrollKey != null ? PageStorageKey<String>(scrollKey!) : null,
+        primary: true,
+        slivers: [
+          if (topFixedChildren != null)
+            SliverList.builder(
+              itemCount: topFixedChildren!.length,
+              itemBuilder: (final context, final index) => topFixedChildren![index],
+            ),
+          if (isLoading)
+            const SliverToBoxAdapter(
+              child: NeonLinearProgressIndicator(
+                margin: EdgeInsets.symmetric(
                   horizontal: 10,
                   vertical: 5,
                 ),
-              visible: isLoading,
               ),
-            Expanded(
-              child: Scrollbar(
-                child: ListView(
-                  primary: true,
-                  key: scrollKey != null ? PageStorageKey<String>(scrollKey!) : null,
-                  padding: withFloatingActionButton ? const EdgeInsets.only(bottom: 88) : null,
-                  children: [
-                    ...?topScrollingChildren,
-                    NeonError(
+            ),
+          if (error != null)
+            SliverToBoxAdapter(
+              child: NeonError(
                 error,
-                      onRetry: onRefresh,
+                onRetry: () async => refreshIndicatorKey.currentState!.show(),
               ),
-                    if (items != null) ...[
-                      for (final item in items!) ...[
-                        builder(context, item),
-                      ],
-                    ],
-                  ],
             ),
+          if (topScrollingChildren != null)
+            SliverList.builder(
+              itemCount: topScrollingChildren!.length,
+              itemBuilder: (final context, final index) => topScrollingChildren![index],
             ),
+          SliverPadding(
+            padding: hasFloatingActionButton ? const EdgeInsets.only(bottom: 88) : EdgeInsets.zero,
+            sliver: sliver,
           ),
         ],
       ),
     );
   }
+}

packages/neon/neon/lib/src/widgets/unified_search_results.dart

@@ -29,12 +29,18 @@ class NeonUnifiedSearchResults extends StatelessWidget {
     final bloc = accountsBloc.activeUnifiedSearchBloc;
     return ResultBuilder.behaviorSubject(
       stream: bloc.results,
-      builder: (final context, final results) => NeonListView(
-        items: results.data?.entries,
+      builder: (final context, final results) {
+        final values = results.data?.entries.toList();
+
+        return NeonListView(
           isLoading: results.isLoading,
           error: results.error,
           onRefresh: bloc.refresh,
-        builder: (final context, final snapshot) => AnimatedSize(
+          itemCount: values?.length,
+          itemBuilder: (final context, final index) {
+            final snapshot = values![index];
+
+            return AnimatedSize(
               duration: const Duration(milliseconds: 100),
               child: _buildProvider(
                 context,
@@ -43,8 +49,10 @@ class NeonUnifiedSearchResults extends StatelessWidget {
                 snapshot.key,
                 snapshot.value,
               ),
-        ),
-      ),
+            );
+          },
+        );
+      },
     );
   }
 

packages/neon/neon_files/lib/widgets/browser_view.dart

@@ -68,28 +68,32 @@ class _FilesBrowserViewState extends State<FilesBrowserView> {
                       input: files.data,
                       builder: (final context, final sorted) => ValueListenableBuilder(
                         valueListenable: widget.bloc.options.showHiddenFilesOption,
-                        builder: (final context, final showHiddenFiles, final _) => NeonListView<Widget>(
-                          scrollKey: 'files-${pathSnapshot.requireData.join('/')}',
-                          withFloatingActionButton: true,
-                          items: [
-                            for (final uploadTask in tasksSnapshot.requireData.whereType<FilesUploadTask>().where(
+                        builder: (final context, final showHiddenFiles, final _) {
+                          final uploadingTasks = tasksSnapshot.requireData
+                              .whereType<FilesUploadTask>()
+                              .where(
                                 (final task) =>
                                     sorted.where((final file) => _pathMatchesFile(task.path, file.name)).isEmpty,
-                                )) ...[
-                              FileListTile(
+                              )
+                              .toList();
+
+                          return NeonListView(
+                            scrollKey: 'files-${pathSnapshot.requireData.join('/')}',
+                            itemCount: uploadingTasks.length + sorted.length,
+                            itemBuilder: (final context, final index) {
+                              if (index < uploadingTasks.length) {
+                                return FileListTile(
                                   bloc: widget.filesBloc,
                                   browserBloc: widget.bloc,
                                   details: FileDetails.fromUploadTask(
-                                  task: uploadTask,
-                                ),
-                                mode: widget.mode,
+                                    task: uploadingTasks[index],
                                   ),
-                            ],
-                            for (final file in sorted) ...[
+                                );
+                              }
+
+                              final file = sorted[index - uploadingTasks.length];
                               if ((widget.mode != FilesBrowserMode.selectDirectory || file.isDirectory) &&
-                                  (!file.isHidden || showHiddenFiles)) ...[
-                                Builder(
-                                  builder: (final context) {
+                                  (!file.isHidden || showHiddenFiles)) {
                                 final matchingTask = tasksSnapshot.requireData
                                     .firstWhereOrNull((final task) => _pathMatchesFile(task.path, file.name));
 
@@ -107,19 +111,47 @@ class _FilesBrowserViewState extends State<FilesBrowserView> {
                                   bloc: widget.filesBloc,
                                   browserBloc: widget.bloc,
                                   details: details,
-                                      mode: widget.mode,
                                 );
+                              }
+
+                              return null;
                             },
-                                ),
-                              ],
-                            ],
-                          ],
                             isLoading: files.isLoading,
                             error: files.error,
                             onRefresh: widget.bloc.refresh,
-                          builder: (final context, final widget) => widget,
                             topScrollingChildren: [
-                            Align(
+                              FileBrowserNavigator(
+                                path: pathSnapshot.requireData,
+                                bloc: widget.bloc,
+                              ),
+                            ],
+                          );
+                        },
+                      ),
+                    ),
+                  ),
+          ),
+        ),
+      );
+
+  bool _pathMatchesFile(final List<String> path, final String name) => const ListEquality<String>().equals(
+        [...widget.bloc.path.value, name],
+        path,
+      );
+}
+
+class FileBrowserNavigator extends StatelessWidget {
+  const FileBrowserNavigator({
+    required this.path,
+    required this.bloc,
+    super.key,
+  });
+
+  final List<String> path;
+  final FilesBrowserBloc bloc;
+
+  @override
+  Widget build(final BuildContext context) => Align(
         alignment: Alignment.topLeft,
         child: Container(
           margin: const EdgeInsets.symmetric(
@@ -130,27 +162,32 @@ class _FilesBrowserViewState extends State<FilesBrowserView> {
             children: <Widget>[
               IconButton(
                 padding: EdgeInsets.zero,
+                visualDensity: const VisualDensity(
+                  horizontal: VisualDensity.minimumDensity,
+                  vertical: VisualDensity.minimumDensity,
+                ),
                 tooltip: AppLocalizations.of(context).goToPath(''),
                 icon: const Icon(
                   Icons.house,
+                  size: 30,
                 ),
                 onPressed: () {
-                                        widget.bloc.setPath([]);
+                  bloc.setPath([]);
                 },
               ),
-                                    for (var i = 0; i < pathSnapshot.requireData.length; i++) ...[
+              for (var i = 0; i < path.length; i++) ...[
                 Builder(
                   builder: (final context) {
-                                          final path = pathSnapshot.requireData.sublist(0, i + 1);
+                    final path = this.path.sublist(0, i + 1);
                     return Tooltip(
                       message: AppLocalizations.of(context).goToPath(path.join('/')),
                       excludeFromSemantics: true,
                       child: TextButton(
                         onPressed: () {
-                                                widget.bloc.setPath(path);
+                          bloc.setPath(path);
                         },
                         child: Text(
-                                                pathSnapshot.requireData[i],
+                          this.path[i],
                           semanticsLabel: AppLocalizations.of(context).goToPath(path.join('/')),
                         ),
                       ),
@@ -162,23 +199,11 @@ class _FilesBrowserViewState extends State<FilesBrowserView> {
                 .intersperse(
                   const Icon(
                     Icons.keyboard_arrow_right,
+                    size: 30,
                   ),
                 )
                 .toList(),
           ),
         ),
-                            ),
-                          ],
-                        ),
-                      ),
-                    ),
-                  ),
-          ),
-        ),
-      );
-
-  bool _pathMatchesFile(final List<String> path, final String name) => const ListEquality<String>().equals(
-        [...widget.bloc.path.value, name],
-        path,
       );
 }

packages/neon/neon_news/lib/widgets/articles_view.dart

@@ -34,9 +34,8 @@ class _NewsArticlesViewState extends State<NewsArticlesView> {
             sortPropertyOption: widget.newsBloc.options.articlesSortPropertyOption,
             sortBoxOrderOption: widget.newsBloc.options.articlesSortBoxOrderOption,
             input: articles.data,
-            builder: (final context, final sorted) => NeonListView<NewsArticle>(
+            builder: (final context, final sorted) => NeonListView(
               scrollKey: 'news-articles',
-              items: feeds.hasData ? sorted : null,
               isLoading: articles.isLoading || feeds.isLoading,
               error: articles.error ?? feeds.error,
               onRefresh: () async {
@@ -45,11 +44,16 @@ class _NewsArticlesViewState extends State<NewsArticlesView> {
                   widget.newsBloc.refresh(),
                 ]);
               },
-              builder: (final context, final article) => _buildArticle(
+              itemCount: feeds.hasData ? sorted.length : null,
+              itemBuilder: (final context, final index) {
+                final article = sorted[index];
+
+                return _buildArticle(
                   context,
                   article,
                   feeds.requireData.singleWhere((final feed) => feed.id == article.feedId),
-              ),
+                );
+              },
               topFixedChildren: [
                 StreamBuilder<FilterType>(
                   stream: widget.bloc.filterType,

packages/neon/neon_news/lib/widgets/feeds_view.dart

@@ -22,16 +22,15 @@ class NewsFeedsView extends StatelessWidget {
             input: folders.hasData
                 ? feeds.data?.where((final f) => folderID == null || f.folderId == folderID).toList()
                 : null,
-            builder: (final context, final sorted) => NeonListView<NewsFeed>(
+            builder: (final context, final sorted) => NeonListView(
               scrollKey: 'news-feeds',
-              withFloatingActionButton: true,
-              items: sorted,
               isLoading: feeds.isLoading || folders.isLoading,
               error: feeds.error ?? folders.error,
               onRefresh: bloc.refresh,
-              builder: (final context, final feed) => _buildFeed(
+              itemCount: sorted.length,
+              itemBuilder: (final context, final index) => _buildFeed(
                 context,
-                feed,
+                sorted[index],
                 folders.requireData,
               ),
             ),

packages/neon/neon_news/lib/widgets/folders_view.dart

@@ -26,14 +26,16 @@ class NewsFoldersView extends StatelessWidget {
                     return (folder, feedCount, unreadCount);
                   }).toList()
                 : null,
-            builder: (final context, final sorted) => NeonListView<FolderFeedsWrapper>(
+            builder: (final context, final sorted) => NeonListView(
               scrollKey: 'news-folders',
-              withFloatingActionButton: true,
-              items: sorted,
               isLoading: feeds.isLoading || folders.isLoading,
               error: feeds.error ?? folders.error,
               onRefresh: bloc.refresh,
-              builder: _buildFolder,
+              itemCount: sorted.length,
+              itemBuilder: (final context, final index) => _buildFolder(
+                context,
+                sorted[index],
+              ),
             ),
           ),
         ),

packages/neon/neon_notes/lib/widgets/categories_view.dart

@@ -25,13 +25,16 @@ class NotesCategoriesView extends StatelessWidget {
                 ),
               )
               .toList(),
-          builder: (final context, final sorted) => NeonListView<NoteCategory>(
+          builder: (final context, final sorted) => NeonListView(
             scrollKey: 'notes-categories',
-            items: sorted,
             isLoading: notes.isLoading,
             error: notes.error,
             onRefresh: bloc.refresh,
-            builder: _buildCategory,
+            itemCount: sorted.length,
+            itemBuilder: (final context, final index) => _buildCategory(
+              context,
+              sorted[index],
+            ),
           ),
         ),
       );

packages/neon/neon_notes/lib/widgets/notes_view.dart

@@ -21,14 +21,13 @@ class NotesView extends StatelessWidget {
           sortPropertyOption: bloc.options.notesSortPropertyOption,
           sortBoxOrderOption: bloc.options.notesSortBoxOrderOption,
           input: category != null ? notes.data?.where((final note) => note.category == category).toList() : notes.data,
-          builder: (final context, final sorted) => NeonListView<NotesNote>(
+          builder: (final context, final sorted) => NeonListView(
             scrollKey: 'notes-notes',
-            withFloatingActionButton: true,
-            items: sorted,
             isLoading: notes.isLoading,
             error: notes.error,
             onRefresh: bloc.refresh,
-            builder: _buildNote,
+            itemCount: sorted.length,
+            itemBuilder: (final context, final index) => _buildNote(context, sorted[index]),
           ),
         ),
       );

packages/neon/neon_notifications/lib/pages/main.dart

@@ -35,14 +35,13 @@ class _NotificationsMainPageState extends State<NotificationsMainPage> {
             tooltip: AppLocalizations.of(context).notificationsDismissAll,
             child: const Icon(MdiIcons.checkAll),
           ),
-          body: NeonListView<NotificationsNotification>(
+          body: NeonListView(
             scrollKey: 'notifications-notifications',
-            withFloatingActionButton: true,
-            items: notifications.data,
             isLoading: notifications.isLoading,
             error: notifications.error,
             onRefresh: bloc.refresh,
-            builder: _buildNotification,
+            itemCount: notifications.data?.length,
+            itemBuilder: (final context, final index) => _buildNotification(context, notifications.data![index]),
           ),
         ),
       );