[PAY][$250] Workflows - Skeleton overlaps with save button on Expense form

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.1.32-0
Reproducible in staging?: Yes
Reproducible in production?: Unable to check, another behaviour
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: #60327
Email or phone of affected tester (no customers): expensify416+da2@gmail.com
Issue reported by: Applause Internal Team
Device used: macOS chrome, Desktop, mWeb
App Component: Workspace Settings

Action Performed:

1. Go to workspace settings > more features > enable workflow
2. Tap members - Invite 2 members to workspace
3. Tap workflow > Tap add approval workflow
4. Refresh the page

Expected Result:

Skeleton shouldn't overlap with save button

Actual Result:

Skeleton overlaps with save button

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021915174217061165067
• Upwork Job ID: 1915174217061165067
• Last Price Increase: 2025-04-23

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @NicMendonca

[melvin-bot]

Triggered auto assignment to @roryabraham (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @NicMendonca (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[nabi-ebrahimi]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-23 22:40:33 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

There are two related layout issues causing UI overlap on the "Add Approval Workflow" screen in the Workspace:

1. The skeleton loaders overlap with the "Save" button after refreshing the page.
2. There is an instant layout shift that causes the skeleton to overflow when the header text and conditional input are rendered slightly after the initial load.

What is the root cause of that problem?

1. Skeleton Count Miscalculation: The issue comes from using Math.ceil() in the layout calculation, which causes one extra skeleton to render even when space is insufficient, overlapping the "Save" button.

2. Delayed Component Rendering: The header text and the input component are conditionally rendered after the initial render. Their late appearance changes the container's height, which causes the previously calculated skeleton layout to overflow instantly.

• Header line:
  WorkspaceWorkflowsApprovalsExpensesFromPage.tsx#L222

• Input line:
  BaseSelectionList.tsx#L867

What changes do you think we should make in order to solve the problem?

1. Fix Layout Calculation: Update the layout logic to use Math.floor() instead of Math.ceil() to prevent over-calculating the number of skeleton items.

   • See the relevant line here

   const newNumItems = Math.floor(totalHeight / totalItemHeight);

2. Render Skeletons for All Conditional Components: Add skeleton placeholders for the header text and the input component so that their presence is accounted for from the start. This avoids sudden layout changes when these components appear and ensures consistent height calculations for skeleton rendering.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• Skeleton layout tests for both before and after conditional components are mounted.
• Dynamic layout change simulation: Trigger re-renders that introduce the header or input component and verify no overflow occurs.
• Edge height calculation: Ensure Math.floor logic consistently prevents overflow.
• Full page skeleton rendering: Verify that all visible UI elements (headers, inputs, lists) have matching skeleton placeholders.
• Interaction checks: Ensure the “Save” button is always visible and unobstructed.

What alternative solutions did you explore? (Optional)

[roryabraham]

Demoting this