Skip to content
This repository was archived by the owner on Jul 8, 2026. It is now read-only.

[DRAFT] refactor: extract PageLoader component for better code organization #1450

Open
RonenMars wants to merge 4 commits into
mainfrom
ronen/perf/reduce-build-size
Open

[DRAFT] refactor: extract PageLoader component for better code organization #1450
RonenMars wants to merge 4 commits into
mainfrom
ronen/perf/reduce-build-size

Conversation

@RonenMars

@RonenMars RonenMars commented Dec 3, 2025

Copy link
Copy Markdown
Contributor

Replace lodash with radash

Summary

  • Replaced lodash with radash across the entire codebase to reduce bundle size
  • radash is a modern, TypeScript-first utility library with zero dependencies and excellent tree-shaking

Changes Made

Files Modified (18 files)

File Changes
src/store/cache/useCacheStore.ts isEqual from radash
src/store/useProjectStore.ts isEqual from radash
src/components/organisms/topbar/project/manualRun/manualRunButtons.tsx isEqual from radash
src/components/organisms/settings/user/organizations/table.tsx omit from radash
src/services/sessions.service.ts omit from radash
src/utilities/fetchAndExtractZip.utils.ts memoizememo
src/utilities/convertBuildRuntimesToViewTriggers.utils.ts uniqByunique
src/utilities/calculateDeploymentSessionsStats.utils.ts cloneDeep → native structuredClone
src/utilities/openedEditorFilesState.utils.ts native map + unique
src/hooks/useSort.tsx orderBysort
src/components/organisms/settings/user/profile.tsx debounce syntax
src/components/organisms/settings/organization/settings.tsx debounce + omit
src/components/organisms/deployments/sessions/table/table.tsx debounce + isEqual, removed .cancel()
src/components/organisms/topbar/project/buttons.tsx debounce with leading → throttle
src/components/organisms/editorTabs.tsx debounce + last + throttle
src/components/organisms/files/fileTree.tsx debounce syntax
src/components/molecules/copyButton.tsx debounce syntax
src/components/molecules/popover/popoverListContent.tsx debounce syntax
vite.config.ts Updated manualChunks lodash → radash

API Mappings

lodash radash / native
isEqual isEqual (same)
omit omit (same)
last last (same)
memoize memo
uniqBy(arr, fn) unique(arr, fn)
cloneDeep native structuredClone
debounce(fn, delay) debounce({ delay }, fn)
debounce(fn, delay, { leading: true }) throttle({ interval }, fn)
orderBy sort + custom comparator

Bundle Size Impact

Metric Reduction
Minified ~12-15 kB
Gzipped ~4-5 kB

Current vendor-utils chunk: 91.01 kB (gzip: 24.19 kB)

Benefits

  1. Smaller bundle - radash is ~8 kB vs lodash tree-shaken ~20 kB
  2. Zero dependencies - radash has no dependencies
  3. TypeScript-first - built-in types, removed @types/lodash
  4. Modern ES modules - better tree-shaking support
  5. Native APIs - used structuredClone instead of cloneDeep

Test Results

  • Build: ✅ Passes
  • E2E Tests: ✅ 82/83 passed (1 unrelated timeout in timezone trigger test)

Dependencies Removed

  • lodash
  • @types/lodash

What type of PR is this? (check all applicable)

  • 💡 (feat) - A new feature (non-breaking change which adds functionality)
  • 🔄 (refactor) - Code Refactoring - A code change that neither fixes a bug nor adds a feature
  • 🐞 (fix) - Bug Fix (non-breaking change which fixes an issue)
  • 🏎 (perf) - Optimization
  • 📄 (docs) - Documentation - Documentation only changes
  • 📄 (test) - Tests - Adding missing tests or correcting existing tests
  • ⚙️ (ci) - Continuous Integrations - Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
  • ☑️ (chore) - Chores - Other changes that don't modify src or test files
  • ↩️ (revert) - Reverts - Reverts a previous commit(s).

- Migrate all lodash imports to radash equivalents
- Replace cloneDeep with native structuredClone
- Update vite.config.ts manualChunks (lodash → radash)
- Remove lodash and @types/lodash dependencies

Bundle size reduction: ~12-15 kB minified, ~4-5 kB gzipped
- Moved PageLoader implementation to a new file in the atoms directory.
- Updated routes.tsx to import and use the new PageLoader component.
- Removed the inline PageLoader definition from routes.tsx for cleaner code.
…endency

feat: refactor SessionsTable component by removing unused debouncedFetchSessionsRef

refactor: update route configurations for project settings and global connections
@RonenMars RonenMars force-pushed the ronen/perf/reduce-build-size branch from 281a705 to 02c8d1b Compare December 9, 2025 17:55
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant