Skip to content

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

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

Jump to bottom
Open
RonenMars wants to merge 4 commits into
base: main
Choose a base branch
from
Open

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

RonenMars wants to merge 4 commits into from

Conversation

@RonenMars
Copy link
Contributor

@RonenMars RonenMars commented Dec 3, 2025 •
edited
Loading

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 memoize → memo
src/utilities/convertBuildRuntimesToViewTriggers.utils.ts uniqBy → unique
src/utilities/calculateDeploymentSessionsStats.utils.ts cloneDeep → native structuredClone
src/utilities/openedEditorFilesState.utils.ts native map + unique
src/hooks/useSort.tsx orderBy → sort
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).

@RonenMars
fix: increase Node.js heap size for Netlify builds
f562a61 
- Vite production build was failing with "JavaScript heap out of memory"
- error (exit code 134). Set NODE_OPTIONS to 4GB heap limit.
@RonenMars
refactor: replace lodash with radash for smaller bundle size
e3c4a54 
- 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
@RonenMars
refactor: extract PageLoader component for better code organization
406a8ad 
- 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.
@RonenMars
refactor: update omit usage for consistency across components
281a705
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@RonenMars