Skip to content

Comments

Improves app UI performance, better UX#92

Merged
Kenya-DK merged 9 commits intoKenya-DK:better-backendfrom
Yurii-IvoryFace:bb-frontend-optimisation
Feb 8, 2026
Merged

Improves app UI performance, better UX#92
Kenya-DK merged 9 commits intoKenya-DK:better-backendfrom
Yurii-IvoryFace:bb-frontend-optimisation

Conversation

@Yurii-IvoryFace
Copy link
Contributor

Improved app routing speed:

  • avg improvement per page switch 10-30ms
  • huge improvement in Trading Analytics tab, over 300ms saved on page loading when selected 100+ items in table

What was done:

  1. Swithed DataTable to use isFetching, this improves UX on huge tables loading
  • huge save up to 300ms (on r7 5700x3d), you can revert it back to use isLoading for small tables - prevents preloader blinks
  1. Lazy-loading routes + prefetch on hover. Uses custom routeLoaders.ts
  • minor save
  1. Context Value Memo, nav-links memo, and List Components memo (ItemName, RivenPreview, DisplayPlatinum).

old: each AppContextProvider render = new objects = whole tree re-render even if nothing changed
new; re-render only when something really changed

  • minor save
  1. Fixes issue with doble API call on each ItemName creation, also in RivenPreview, uses cache.context.tsx.
export const ItemName = memo(function ItemName(...) {
  // every component instance calls 2 times >
  const { data: tradableItems } = useQuery({
    queryKey: ["cache_items"],
    queryFn: () => api.cache.getTradableItems(), // first req
  });
  const { data: weapons } = useQuery({
    queryKey: ["cache_riven_weapons"],
    queryFn: () => api.cache.getRivenWeapons(),   // second req, even if not needed
  });
  // ...
});

so if in table rendering 100 items, there is 200 API calls

  • saved 50% of loading speed
  1. Lazy-load FinancialReport, load only on button click.
  • saved 20-30ms

prettier made some linefarming, thanks for that

- Lazy Tab Rendering - on nav-tab change, renders only the active page-tab to improve performance (20-30ms win on each tab)
- Decreased default Trading Analytics transaction page size from 50 to 20 elements (over 300ms win on first load, i'll refactor it soon)
- Financial Report now lazy-loading (another 50ms win for Trading Analytics tab)
- AVG 35ms faster navtab switching, but still it's 100-150ms per swich, global refactor soon.
- Lazy load routes to enhance performance
- Prefetch routes on hover (up to 30ms win)

- avg load time decreased to ~70ms from ~130 on route change
- Context value memorization to prevent unnecessary re-renders
- no more recreation of navlinks on each rerender
There was a small issue with unnecessary API calls, on each render of ItemName component calling to cached `tradableItems` and `weapons`, so if in table were 100 items, each item calling api 2x times = 200 API calls.
- Created `cache.context.tsx` to load tradableItems and weapons once on app level
- Changed `ItemName.tsx` to use cache context instead of app context
- memoizes TransactionListItem, ChatMessage, WFMOrder, WFMAuction, and RivenPreview to reduce unnecessary re-renders
- switches RivenPreview weapons source to cache context
- also memorizes tabs
Need to stom my memo() minigun
- Replaced `isLoading` with `isFetching` to prevent unnecessary loading states during data refetching, ensuring smoother navigation and improved user experience.

Updated all DataTables to use `isFetching` instead of `isLoading` for better performance during data refetching.
`isLoading` is better for small DataTables, you can revert it to old behaviour if there no much items to load. (prevent loader flashes)
- it fixes UI freezing when trying to change page, allows to interupt DataTable loading
There is still issue when DataTable loaded (after preloader starts to fade), if user tries to change page in this time he will encounter UI freezing up to 100-150ms D:
Fix for that is Chunk Rendering or Virtualization, but it is a overkill?
@Yurii-IvoryFace Yurii-IvoryFace force-pushed the bb-frontend-optimisation branch from f0774c5 to fe80aed Compare February 7, 2026 22:16
@Kenya-DK Kenya-DK merged commit 4b7a397 into Kenya-DK:better-backend Feb 8, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants