[Due for payment 2026-07-02] [Design] Add Load More pattern to Workspace Workflows approval list

@elirangoshen

Problem

On Workspace > Workflows, the Approvals section renders all approval workflow cards at once. For workspaces with many custom workflows (each card includes member pills, approver chain, and limits), this causes:

Slow initial page load / jank when opening Workflows settings
Excessive scrolling before reaching Add approval workflow

Search helps find a specific workflow but does not reduce initial render cost when the list is long and the user is browsing.

Current behavior

Route: workspaces/:policyID/workflows
All workflows rendered via searchFilteredWorkflows.map(...) in WorkspaceWorkflowsPage.tsx
Search input shown when workflow count > 3 (SEARCH_BAR_THRESHOLD)
Default workflow card (applies to "Everyone") is always first in the sorted list
Each row is a rich card (ApprovalWorkflowSection.tsx) with member pills, approver chain, and approval limits
Workflow data is already client-side (derived from policy.employeeList via WorkflowUtils.convertPolicyEmployeesToApprovalWorkflows) — pagination would be UI-only, no API changes

Goal

Design a Load More (or equivalent progressive disclosure) pattern so we only render an initial batch of approval workflows, with a clear affordance to reveal more — without hurting discoverability of Add approval workflow.

Design questions to resolve

Initial batch size — how many workflow cards show before Load More? (e.g. 5, 10, 12 — compare HR integrations magic number of 12 in #90962)
Button copy & pattern — which existing pattern fits best?
- Show more link button (Search transaction groups)
- See +X more count-based row (#89601)
- Load more with optional loading indicator
Placement — Load More button between the list and Add approval workflow, or elsewhere?
Default workflow — always visible regardless of batch, or included in the count?
Search interaction — when user is searching, should we:
- show all matches (search overrides pagination), or
- still paginate filtered results?
Empty / no-more states — hide button when all visible; any "Showing X of Y" helper text?
Mobile vs wide layout — same behavior on narrow and wide workspace settings?
Accessibility — focus management and screen reader announcement when more items load

Reference patterns in NewDot

Pattern	Where	Notes
Search when > N items	Workflows approvals (today), Merchant Rules, HR integrations	Threshold = 3 (workflows/rules), 12 (HR)
`Show more` link button	Search expanded transaction groups	`common.showMore` + link-style `Button`
`See +X more`	Home Time Sensitive / Your Spend (#89601)	Count in label, expands in place
Client-side batching hook	`useFilteredOptions`	`loadMore` / `hasMore` pattern (reports picker, not UI spec)

Screenshots / mocks needed

Note: If no large test workspace is available, Design should use a mock with 10+ approval workflow cards.

Workflows page with many approval cards (10+) — current state
Proposed initial collapsed state + Load More affordance
State after loading more
Interaction while search is active (if applicable)
Narrow (mobile) layout variant

Out of scope (follow-up engineering issue)

Backend/API pagination (data is already in Onyx)
Merchant Rules list (similar problem, separate decision)
Virtualized list / FlatList refactor (unless Design recommends it over Load More)

Acceptance criteria (design deliverable)

Figma spec (or annotated screenshots) for Load More on Workflows > Approvals
Decisions documented for batch size, copy, search behavior, and default-workflow handling
Handoff notes for engineering implementation in WorkspaceWorkflowsPage.tsx

Related issues

#89601 — See +X more pattern precedent
#90962 — searchable list threshold precedent (12 items)
#83865 — Workflows page migration tracking
#91244 — upcoming changes to approval workflow cards (coordinate so Load More design accounts for new card content)

Issue Owner

Current Issue Owner: @elirangoshen

@dannymcclain

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

Discussed in this thread btw https://expensify.slack.com/archives/C05LX9D6E07/p1779123188188269

Alright noodling around here in Figma. A few options:

Button (Load more)

Link Button (Show more)

Ghost Button (See X more)

I prefer the Load more button (first option), but honestly I don't feel all that strongly. I added the load more after 5 workflows (including the default), but happy to adjust to whatever the team thinks makes sense (I probably wouldn't go more than 5 though). I'm also using our Small button because it felt the most appropriate here.

cc @Expensify/design for thoughts!

@dubielzyk-expensify

Maybe one consideration here is, I think we're going to be updating the style of workflow rows to include two small buttons at the bottom of each row, right? cc @dubielzyk-expensify

If we do that, the first idea above might not feel as nice as it does now? I don't feel strongly, but just wanted to call that out.

@dubielzyk-expensify

Ah good point! I forgot about those buttons coming with Agents. @dubielzyk-expensify if you don't mind posting/pointing me to where that landed, we can take a fresh look with the up to date layout. Good shout Shawn!

This is where we landed: https://www.figma.com/design/PN3pXuxFPPmick1XkuIzcO/Custom-Agents?node-id=297-94307&t=bOpiIQCmigVHcnCW-4

Agree with the same thought. Not sure if I like the other options better either way though

Ok let's take a look with the up-to-date layout:

The OG small button on the left does not look good, but I think the centered buttons work pretty well. I actually think increasing the size (from small > medium) helps, and I actually think I might prefer the centered medium link button the most? Curious for your thoughts @Expensify/design!

Figma mocks are here if you wanna peep the full screens.

I don't have super strong feelings. I might slightly lean towards left-aligned link button, but I am happy to roll with whatever you like best!

@dubielzyk-expensify

The link button definitely seems to stand out in the right way to me. And I think left-aligned is more aligned 🙃 with how we do stuff like this elsewhere, yeah?

Let's see what @dubielzyk-expensify thinks!

(Y'all know my feelings on the link buttons 😅)

Send it 🚀

@elirangoshen

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.4.19-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

[#91727] Add Load more pattern to Workspace Workflows approval list #94052

If no regressions arise, payment will be issued on 2026-07-02. 🎊

For reference, here are some details about the assignees on this issue:

@elirangoshen does not require payment (Contractor)

@elirangoshen

@elirangoshen Huh... This is 4 days overdue. Who can take care of this?

@elirangoshen

@elirangoshen 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

@elirangoshen

@elirangoshen 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

@elirangoshen

@elirangoshen Still overdue 6 days?! Let's take care of this!

@elirangoshen

@elirangoshen 10 days overdue. I'm getting more depressed than Marvin.

there megred pr we can close thus issue no ?

@ikevin127

@ikevin127 were you paid for reviewing PR #94052?

@MonilBhavsar

@MonilBhavsar No I didn't - thanks a lot for flagging, I would've missed it 😅 @mallenexpensify If you could please drop a quick summary for my work on this PR when you get a chance 🙏

BugZero Checklist:

[Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

Link to comment: N/A - Result of the original design
[Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

Link to discussion: N/A
[Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.
[BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

Link to issue: https://github.com/Expensify/Expensify/issues/657036

Regression Test Proposal

Requires a Control workspace with Approvals enabled in Advanced mode and more than 5 approval workflows.

Open the Control workspace and go to Workspace → Workflows.
In the Approvals section, verify only the first 5 workflow cards render, followed by a Load more card, then Add approval workflow.
Verify the Load more label reads "Load X more" where X = (total workflows − 5).
Tap Load more and verify all remaining workflow cards render and the Load more card disappears.
Confirm a workspace with 5 or fewer workflows shows no Load more card.
Type a member/approver name into the Find workflow search and verify all matches show and no Load more card appears while searching.

Do we agree 👍 or 👎.

Zapier Logs

Run ID: 00040eee-2c9e-a192-c458-adf2bc482854

@ikevin127

Payment Summary

Contributor+: @ikevin127 due $250 via NewDot

^ Test case created. Thx

Thanks for catching @MonilBhavsar , I too would have missed it.

@ikevin127

Approved $250 to @ikevin127

Navigation Menu

Repository navigation

[Due for payment 2026-07-02] [Design] Add Load More pattern to Workspace Workflows approval list #91727