perf(mobile): optimize date loading with batch loading #17240

andreymir · 2025-03-30T17:10:45Z

Description

Introduce DateBatchLoader to reduce the number of database queries by loading dates in batches, improving performance when querying large lists.

My Immich library has 30k assets. On my Fairphone 5 Android phone Add Photos to Album screen takes ~20 seconds before showing anything. The bottleneck is in _buildRenderList in /mobile/lib/widgets/asset_grid/asset_grid_data_structure.dart.
For GroupAssetsBy.none case it queries dates from the database by 1 row for each section. With section size 60 assets and 30k assets in the library that makes 500 separate queries and takes a long time.

The optimization in this PR introduce DateBatchLoader to query dates in batches of 60000 rows (1000 sections).

How Has This Been Tested?

Tested on Android only (Fairphone 5).

Before

screen-20250330-144007-compressed.mp4

After

screen-20250330-185714-compressed.mp4

Checklist:

I have performed a self-review of my own code
I have no unrelated changes in the PR.
I have followed naming conventions/patterns in the surrounding code

zackpollard

This LGTM but I will let someone that works on mobile actually merge this

shenlong-tanwen

Can you fix the failing checks?

mobile/lib/widgets/asset_grid/asset_grid_data_structure.dart

Introduce DateBatchLoader to reduce the number of database queries by loading dates in batches, improving performance when querying large lists.

andreymir · 2025-03-31T19:13:37Z

Can you fix the failing checks?

@shenlong-tanwen, thanks for checking the PR, fixed linter errors.

shenlong-tanwen

TBH, This is just loading 60K datetime objects, only to use a maximum of 1000 of them and discard the others. But this should fix the slowness for the time being until we get to rework the render grid.

…et-grid-performance

alextran1502 · 2025-04-07T14:54:08Z

Thank you for the PR. During testing I see this error message poped up

I/flutter (30903): RangeError (start): Invalid value: Only valid value is 0: 255
I/flutter (30903): #0      RangeError.checkValidRange (dart:core/errors.dart:388)
I/flutter (30903): #1      ListExtensions.slice (package:collection/src/list_extensions.dart:242)
I/flutter (30903): #2      RenderList.loadAssets (package:immich_mobile/widgets/asset_grid/asset_grid_data_structure.dart:104)
I/flutter (30903): #3      _Section.build.<anonymous closure> (package:immich_mobile/widgets/asset_grid/immich_asset_grid_view.dart:667)
I/flutter (30903): #4      _LayoutBuilderElement._rebuildWithConstraints.updateChildCallback (package:flutter/src/widgets/layout_builder.dart:201)
I/flutter (30903): #5      BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:3056)
I/flutter (30903): #6      _LayoutBuilderElement._rebuildWithConstraints (package:flutter/src/widgets/layout_builder.dart:240)
I/flutter (30903): #7      RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:2827)
I/flutter (30903): #8      PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:1161)
I/flutter (30903): #9      RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:2826)
I/flutter (30903): #10     RenderConstrainedLayoutBuilder.rebuildIfNecessary (package:flutter/src/widgets/layout_builder.dart:293)
I/flutter (30903): #11     _RenderLayoutBuilder.performLayout (package:flutter/src/widgets/layout_builder.dart:390)
I/flutter (30903): #12     RenderObject.layout (package:flutter/src/rendering/object.dart:2715)
I/flutter (30903): #13     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115)
I/flutter (30903): #14     RenderObject.layout (package:flutter/src/rendering/object.dart:2715)
I/flutter (30903): #15     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115)
I/flutter (30903): #16     RenderObject.layout (package:flutter/src/rendering/object.dart:2715)
I/flutter (30903): #17     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:213)
I/flutter (30903): #18     RenderObject.layout (package:flutter/src/rendering/object.dart:2715)
I/flutter (30903): #19     RenderSliverEdgeInsetsPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:133)
I/flutter (30903): #20     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:371)
I/flutter (30903): #21     RenderObject.layout (package:flutter/src/rendering/object.dart:2715)
I/flutter (30903): #22     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:608)
I/flutter (30903): #23     UnboundedRenderViewport._attemptLayout (package:scrollable_positioned_list/src/viewport.dart:263)
I/flutter (30903): #24     UnboundedRenderViewport.performLayout (package:scrollable_positioned_list/src/viewport.dart:182)
I/flutter (30903): #25     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:2548)
I/flutter (30903): #26     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1112)
I/flutter (30903): #27     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1125)
I/flutter (30903): #28     RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:616)
I/flutter (30903): #29     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:1231)
I/flutter (30903): #30     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:482)
I/flutter (30903): #31     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1442)
I/flutter (30903): #32     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1355)
I/flutter (30903): #33     SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1208)
I/flutter (30903): #34     _invoke (dart:ui/hooks.dart:316)
I/flutter (30903): #35     PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:428)
I/flutter (30903): #36     _drawFrame (dart:ui/hooks.dart:288)

Can you please help double check what caused this?

andreymir · 2025-04-10T19:45:27Z

Thank you for the PR. During testing I see this error message poped up

I/flutter (30903): RangeError (start): Invalid value: Only valid value is 0: 255
I/flutter (30903): #0      RangeError.checkValidRange (dart:core/errors.dart:388)
I/flutter (30903): #1      ListExtensions.slice (package:collection/src/list_extensions.dart:242)
I/flutter (30903): #2      RenderList.loadAssets (package:immich_mobile/widgets/asset_grid/asset_grid_data_structure.dart:104)

Looking at the stacktrace I think the error is not related to the changes. It happens in loadAssets function at line 104:

return _buf.slice(offset - _bufOffset, offset - _bufOffset + count);

Seems like in some situations it tries to take a slice from an empty buffer. Do you have the steps to reproduce the error? I was not able to reproduce it.

alextran1502 · 2025-04-10T20:35:21Z

Do you have the steps to reproduce the error? I was not able to reproduce it.

I don't I was testing normal usage and triggered the error, it is quite sporadic so I don't have reproducible steps

andreymir · 2025-04-10T21:12:20Z

Maybe the issue here because loadAssets is called with totalCount instead of count? In other places it pass count.

mobile/lib/widgets/asset_grid/immich_asset_grid_view.dart

  @override
  Widget build(
    BuildContext context,
  ) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final width = constraints.maxWidth / assetsPerRow -
            margin * (assetsPerRow - 1) / assetsPerRow;
        final rows = (section.count + assetsPerRow - 1) ~/ assetsPerRow;
        final List<Asset> assetsToRender = scrolling
            ? []
            : renderList.loadAssets(section.offset, section.count);
        return Column(
          key: ValueKey(section.offset),
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (section.type == RenderAssetGridElementType.monthTitle)
              _MonthTitle(date: section.date),
            if (section.type == RenderAssetGridElementType.groupDividerTitle ||
                section.type == RenderAssetGridElementType.monthTitle)
              _Title(
                selectionActive: selectionActive,
                title: section.title!,
                assets: scrolling
                    ? []
                    : **renderList.loadAssets(section.offset, section.totalCount),**  // <-- should be **count** instead?
                allAssetsSelected: allAssetsSelected,
                selectAssets: selectAssets,
                deselectAssets: deselectAssets,
              ),
          ],
        );
      },
    );
  }
}

I could try to update it to count, but not sure how to verify that it fixes the problem since I could not see the error. Any advice?

…et-grid-performance

) * perf(mobile): optimize date loading with batch loading Introduce DateBatchLoader to reduce the number of database queries by loading dates in batches, improving performance when querying large lists. * remove unused totalCount parameter from DateBatchLoader --------- Co-authored-by: Alex <[email protected]>

github-actions bot added the 📱mobile label Mar 30, 2025

etnoy added the changelog:enhancement label Mar 30, 2025

zackpollard requested a review from shenlong-tanwen March 31, 2025 09:45

zackpollard approved these changes Mar 31, 2025

View reviewed changes

zackpollard requested a review from alextran1502 March 31, 2025 09:57

shenlong-tanwen requested changes Mar 31, 2025

View reviewed changes

mobile/lib/widgets/asset_grid/asset_grid_data_structure.dart Outdated Show resolved Hide resolved

andreymir added 2 commits March 31, 2025 20:51

perf(mobile): optimize date loading with batch loading

5bd0804

Introduce DateBatchLoader to reduce the number of database queries by loading dates in batches, improving performance when querying large lists.

remove unused totalCount parameter from DateBatchLoader

7a6512b

andreymir force-pushed the optimize-asset-grid-performance branch from 72cd31d to 7a6512b Compare March 31, 2025 18:51

andreymir requested a review from shenlong-tanwen March 31, 2025 20:18

shenlong-tanwen approved these changes Apr 1, 2025

View reviewed changes

Merge branch 'main' of github.com:immich-app/immich into optimize-ass…

41ef1c6

…et-grid-performance

Merge branch 'main' of github.com:immich-app/immich into optimize-ass…

54eee5c

…et-grid-performance

alextran1502 approved these changes Apr 14, 2025

View reviewed changes

alextran1502 enabled auto-merge (squash) April 14, 2025 19:03

alextran1502 merged commit bd92748 into immich-app:main Apr 14, 2025
39 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

perf(mobile): optimize date loading with batch loading #17240

perf(mobile): optimize date loading with batch loading #17240

andreymir commented Mar 30, 2025

Uh oh!

zackpollard left a comment

Uh oh!

shenlong-tanwen left a comment

Uh oh!

Uh oh!

andreymir commented Mar 31, 2025

Uh oh!

shenlong-tanwen left a comment

Uh oh!

alextran1502 commented Apr 7, 2025

Uh oh!

andreymir commented Apr 10, 2025

Uh oh!

alextran1502 commented Apr 10, 2025 •

edited

Loading

Uh oh!

andreymir commented Apr 10, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

perf(mobile): optimize date loading with batch loading #17240

perf(mobile): optimize date loading with batch loading #17240

Conversation

andreymir commented Mar 30, 2025

Description

How Has This Been Tested?

Before

After

Checklist:

Uh oh!

zackpollard left a comment

Choose a reason for hiding this comment

Uh oh!

shenlong-tanwen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

andreymir commented Mar 31, 2025

Uh oh!

shenlong-tanwen left a comment

Choose a reason for hiding this comment

Uh oh!

alextran1502 commented Apr 7, 2025

Uh oh!

andreymir commented Apr 10, 2025

Uh oh!

alextran1502 commented Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andreymir commented Apr 10, 2025

Uh oh!

Uh oh!

Uh oh!

alextran1502 commented Apr 10, 2025 •

edited

Loading