feat: please stop fucking up scroll position after I update an env var

[capaj]

Is your feature request related to a problem? Please describe.

I have a fair amount of env vars in my account.
please just let me save an ENV var without reseting my scroll position and the "Reveal values" toggle
There's nothing more gruelling than having to update 10 env vars with each one requiring me to do a monkey dance between each one

Describe the solution you'd like to see

AJAX in the background, it's been a thing since 26 years ago. Try it, it's real fun. No need to do full page reload for every user interaction

Describe alternate solutions

I should probably use a CLI-oh wait you cannot set ENV vars with CLI

Additional information

No response

[ericallam]

@claude do a sentiment analysis of this issue please (and propose a fix)

[claude]

Claude finished @ericallam's task in 1m 2s —— View job

---

Analyzing Issue #2845

• Perform sentiment analysis
• Read repository guidelines (CLAUDE.md)
• Find env vars management code
• Analyze current implementation
• Propose a fix

---

Sentiment Analysis 🎭

Overall Sentiment: Frustrated/Annoyed (but with valid UX concerns)

The issue author expresses significant frustration with the current UX for managing environment variables:

Aspect	Analysis
Emotion	High frustration ("nothing more gruelling", strong language in title)
Pain Point	Repetitive friction when updating multiple env vars
Technical Context	User understands the solution (AJAX) and sarcastically notes it's been available "since 26 years ago"
Constructive?	Yes - despite the tone, the feedback is actionable with a clear solution

The frustration is amplified because:

1. They have many env vars to manage
2. Each update requires: scroll back to position → re-enable "Reveal values" → find the next var
3. The "monkey dance" metaphor captures the tedious workflow well

---

Root Cause Found 🔍

In apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables/route.tsx:

Line 162-174 - The edit action uses redirectDocument which forces a full page reload:

//use redirectDocument because it reloads the page
return redirectDocument(
  v3EnvironmentVariablesPath(
    { slug: organizationSlug },
    { slug: projectParam },
    { slug: envParam }
  ),
  ...
);

The comment literally says "because it reloads the page" - this was intentional but causes the UX issues.

Additional issues:

• The revealAll state is local React state (line 199) so it resets on navigation
• No scroll position preservation

---

Proposed Fix 💡

Option 1: Use useFetcher instead of Form + redirectDocument (Recommended)

Convert the edit form to use Remix's useFetcher which allows:

• Background form submission without navigation
• Preserve scroll position
• Keep revealAll toggle state
• Optimistic UI updates

Changes needed:

1. Replace <Form> with fetcher.Form in EditEnvironmentVariablePanel
2. Return json({ success: true }) instead of redirectDocument from the action
3. Use useRevalidator or let Remix auto-revalidate the loader
4. Close the dialog on successful submission

Option 2: Quick fix - preserve state via URL params

Store revealAll in URL search params so it persists across redirects. However, this doesn't fix scroll position.

---

Would you like me to implement Option 1? It's the proper fix that addresses all concerns.

[capaj]

@claude good bot

[srigi]

Would you like me to implement Option 1? It's the proper fix that addresses all concerns.

Yes @claude please continue!

[mohit0ranjan]

@claude have you resolved the issue or may i contrubute

[ericallam]

@claude implement option 1

[claude]

Claude finished @ericallam's task in 2m 30s —— View job • claude/issue-2845-20260108-1104 • Create PR ➔

---

Implementing Option 1: useFetcher for Environment Variables

• Read repository guidelines (CLAUDE.md)
• Analyze current implementation in detail
• Modify EditEnvironmentVariablePanel to use useFetcher
• Update action to return JSON instead of redirectDocument
• Verify changes and run type check
• Commit and push changes

---

Summary

Implemented the fix to preserve scroll position and toggle state when editing environment variables. The key changes:

1. Switched to useFetcher - The edit form now uses Remix's useFetcher which allows background form submission without navigation/page reload.

2. Return JSON instead of redirect - The action now returns json({ success: true }) instead of redirectDocument, allowing Remix to automatically revalidate the loader data without a full page reload.

3. Auto-close dialog - Added a useEffect hook that closes the edit dialog when the submission succeeds.

4. Unique form IDs - Changed the form ID to be unique per variable (edit-environment-variable-${variable.id}-${variable.environment.id}) to prevent form state conflicts.

What this fixes

• Scroll position is now preserved after editing an env var
• "Reveal values" toggle stays enabled
• Search filter remains active
• No more "monkey dance" when updating multiple env vars

---

---

View job |