[Dashboard] - Performance Check

[KirillKirill]

Issue tracking

Not ticketed

Context behind the change

This PR aimed to boost a performance of the Dashboard App. That was mostly achieved by tree shaking of our sdk module (that got us the biggest perf bump) and mui icons, and minifying the main bundle via vite and its options.
The screenshots below show, how a performance got bumped on the heaviest pages (Home and Search Results) and how was decreased the main bundle and time to build the app.
Also I eliminated a layout shift on pages and added aria labels to some buttons in order to improve the accessibility score

Screenshots

x5 less modules to transform, x2.5 less size of the main bundle, 1.5 seconds less to build the project

Before	After

+15 perf points and +10 a11y points

Before	After

1 second less to paint the first elements, no layout shift

Before	After

Before	After

Before	After

How has this been tested?

running yarn build, then yarn preview, then run Lighthouse in Chrome

Release plan

regular

Potential risks; What to monitor; Rollback plan

no risks i guess

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
human-dashboard-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2025 1:51pm

4 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
faucet-frontend	⬜️ Ignored (Inspect)	Visit Preview		Jul 10, 2025 1:51pm
faucet-server	⬜️ Ignored (Inspect)	Visit Preview		Jul 10, 2025 1:51pm
human-app	⬜️ Skipped (Inspect)			Jul 10, 2025 1:51pm
staking-dashboard	⬜️ Skipped (Inspect)			Jul 10, 2025 1:51pm

[dnechay]

Amazing work!
Next improvement would be to update mui to latest version ;)

My only concern is direct import from @human-protocol/sdk/src/... of sdk, which implies knowledge about package internals. I understand that there is no option to do it in another way atm, but maybe we can prepare a separate PR for SDK where we improve that (as well as exporting some other useful types from there, such as EscrowData), wdyt @portuu3 @flopez7?

[flopez7]

Amazing work! Next improvement would be to update mui to latest version ;)

My only concern is direct import from @human-protocol/sdk/src/... of sdk, which implies knowledge about package internals. I understand that there is no option to do it in another way atm, but maybe we can prepare a separate PR for SDK where we improve that (as well as exporting some other useful types from there, such as EscrowData), wdyt @portuu3 @flopez7?

All this data is already exported in SDK, we can directly do import { ChainId } from '@human-protocol/sdk';
@KirillKirill @dnechay

[KirillKirill]

@flopez i need to specify full path to file (e.g import { ChainId } from '@human-protocol/sdk/src/enums'), because otherwise it would pull the whole sdk, which is huge. the reason why vite pulls the whole sdk is that it can't properly tree-shake the package. now, when you import from sdk's index file, it imports all the modules, because sdk uses a barrel export pattern, which prevents proper tree-shaking

[portuu3]

@flopez i need to specify full path to file (e.g import { ChainId } from '@human-protocol/sdk/src/enums'), because otherwise it would pull the whole sdk, which is huge. the reason why vite pulls the whole sdk is that it can't properly tree-shake the package. now, when you import from sdk's index file, it imports all the modules, because sdk uses a barrel export pattern, which prevents proper tree-shaking

What would be the changes to apply to fix this? @KirillKirill

[KirillKirill]

@portuu3 i might be mistaken, but we need to change sdk's index file somehow, because if i import a constant, it pulls everything from the sdk (i.e types, enums, clients, utils)
as alternative, we can add entrypoints to the package json like that:

{
  "exports": {
    ".": "./dist/index.js",
    "./enums": "./dist/enums.js",
    "./constants": "./dist/constants.js",
  }
}

this is a good modern practice, but still if i would accidentally import from the index file, it would pull everything from it.