Skip to content

⚡ Bolt: Optimize MediaGalleryView sorting and rendering #500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Dexploarer wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

⚡ Bolt: Optimize MediaGalleryView sorting and rendering #500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .jules/bolt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 2025-04-29 - O(n log n) overhead in localeCompare for ISO dates
**Learning:** `localeCompare` is heavily used across the codebase for sorting simple ISO timestamp strings (e.g., `createdAt`), which incurs a significant and unnecessary O(n log n) performance hit compared to raw string comparison.
**Action:** When sorting standard ISO 8601 strings, always replace `localeCompare` with raw comparison (`b > a ? 1 : b < a ? -1 : 0`). Additionally, ensure derived filtered lists in React are wrapped in `useMemo` to avoid redundant O(n) filtering on re-renders.
33 changes: 21 additions & 12 deletions apps/app/src/components/MediaGalleryView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* APIs (getDatabaseTables, executeDatabaseQuery).
*/

import { useCallback, useEffect, useState } from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { client, type QueryResult } from "../api-client";

type MediaType = "all" | "image" | "video" | "audio";
Expand Down Expand Up @@ -177,11 +177,16 @@ export function MediaGalleryView() {
}

// Sort by date descending
// ⚡ Bolt: Use raw string comparison instead of localeCompare for faster timestamp sorting
allMedia.sort((a, b) => {
if (!a.createdAt && !b.createdAt) return 0;
if (!a.createdAt) return 1;
if (!b.createdAt) return -1;
return b.createdAt.localeCompare(a.createdAt);
return b.createdAt > a.createdAt
? 1
: b.createdAt < a.createdAt
? -1
: 0;
});
Comment on lines 181 to 190
Copy link
Copy Markdown

@codereviewbot-ai codereviewbot-ai Bot Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Potentially Incorrect Date Sorting

The sorting logic for allMedia uses raw string comparison on the createdAt field:

return b.createdAt > a.createdAt ? 1 : b.createdAt < a.createdAt ? -1 : 0;

This approach assumes that all createdAt values are in a consistent, lexicographically sortable format (such as ISO 8601). If any createdAt values are in a different format or are malformed, the sort order may be incorrect, leading to unexpected results in the media gallery.

Recommended Solution:

  • Ensure that all createdAt values are normalized to a consistent format (preferably ISO 8601) before sorting.
  • Alternatively, parse the dates using Date.parse() or new Date() for comparison: 
    allMedia.sort((a, b) => {
  const dateA = Date.parse(a.createdAt);
  const dateB = Date.parse(b.createdAt);
  return dateB - dateA;
});
  • Handle invalid or missing dates explicitly to avoid NaN results.


setMedia(allMedia);
Expand All @@ -197,16 +202,20 @@ export function MediaGalleryView() {
loadMedia();
}, [loadMedia]);

const filtered = media.filter((m) => {
if (filter !== "all" && m.type !== filter) return false;
if (
search &&
!m.filename.toLowerCase().includes(search.toLowerCase()) &&
!m.url.toLowerCase().includes(search.toLowerCase())
)
return false;
return true;
});
// ⚡ Bolt: Memoize the derived filtered list and hoist lowercase conversion to prevent O(n) reallocation and redundant conversions on re-renders
const filtered = useMemo(() => {
const searchLower = search?.toLowerCase() ?? "";
return media.filter((m) => {
if (filter !== "all" && m.type !== filter) return false;
if (
searchLower &&
!m.filename.toLowerCase().includes(searchLower) &&
!m.url.toLowerCase().includes(searchLower)
)
return false;
return true;
});
}, [media, filter, search]);
Comment on lines +206 to +218
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The useMemo block can be further optimized for performance and clarity. Since search is initialized as a string, the optional chaining and nullish coalescing are redundant. Additionally, the searchLower check can be hoisted outside the filter call to avoid repeated checks inside the loop. For very large lists, you might also consider pre-calculating lowercase values or using a case-insensitive regex to avoid repeated .toLowerCase() calls on item properties.

Suggested change
const filtered = useMemo(() => {
const searchLower = search?.toLowerCase() ?? "";
return media.filter((m) => {
if (filter !== "all" && m.type !== filter) return false;
if (
searchLower &&
!m.filename.toLowerCase().includes(searchLower) &&
!m.url.toLowerCase().includes(searchLower)
)
return false;
return true;
});
}, [media, filter, search]);
const filtered = useMemo(() => {
const searchLower = search.toLowerCase();
if (!searchLower) {
return filter === "all" ? media : media.filter((m) => m.type === filter);
}
return media.filter((m) => {
if (filter !== "all" && m.type !== filter) return false;
return (
m.filename.toLowerCase().includes(searchLower) ||
m.url.toLowerCase().includes(searchLower)
);
});
}, [media, filter, search]);


return (
<div>
Expand Down
Loading