Skip to content

fix: prevent blank flash when creating role in canvas #373

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

Merged
drifter089 merged 1 commit into from
Jan 10, 2026
Merged

fix: prevent blank flash when creating role in canvas #373

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/app/teams/[teamId]/hooks/use-create-role.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,9 +195,13 @@ export function useCreateRole({
onSuccess: (newRole, _variables, context) => {
if (!context) return;

// Invalidate caches to ensure fresh data on next fetch
void utils.team.getById.invalidate({ id: teamId });
void utils.role.getByTeamId.invalidate({ teamId });
// Update cache BEFORE node so RoleCard finds newRole.id on re-render
utils.role.getByTeamId.setData({ teamId }, (old) => {
if (!old) return [newRole];
return old.map((role) =>
role.id === context.tempRoleId ? newRole : role,
);
});

// Update node with real roleId and clear pending state (canvas context only)
if (storeApi && setNodes) {
Expand All @@ -219,13 +223,9 @@ export function useCreateRole({
setNodes(updatedNodes);
}

// Replace temp role with real role in cache
utils.role.getByTeamId.setData({ teamId }, (old) => {
if (!old) return [newRole];
return old.map((role) =>
role.id === context.tempRoleId ? newRole : role,
);
});
// Invalidate caches for background refresh
void utils.team.getById.invalidate({ id: teamId });
void utils.role.getByTeamId.invalidate({ teamId });
Comment on lines +226 to +228
Copy link

@coderabbitai coderabbitai bot Jan 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

cat -n src/app/teams/[teamId]/hooks/use-create-role.tsx | head -250 | tail -50

Repository: drifter089/orgOS

Length of output: 1968

🏁 Script executed:

# Check the full CreateRoleVariables type definition
rg -n "type CreateRoleVariables|interface CreateRoleVariables" -A 10 src/app/teams/[teamId]/hooks/use-create-role.tsx

Repository: drifter089/orgOS

Length of output: 322

🏁 Script executed:

# Search for invalidateDashboardCache utility and its usage
rg -n "invalidateDashboardCache" --type=ts --type=tsx -B 2 -A 2

Repository: drifter089/orgOS

Length of output: 87

🏁 Script executed:

# Look for other role-metric mutation patterns
rg -n "metricId" --type=ts --type=tsx src/app/teams/ -B 2 -A 2 | head -100

Repository: drifter089/orgOS

Length of output: 87

🏁 Script executed:

# Search for invalidateDashboardCache without strict file type
rg -n "invalidateDashboardCache" -B 2 -A 2

Repository: drifter089/orgOS

Length of output: 8673

🏁 Script executed:

# Search for dashboard.getDashboardCharts invalidation
rg -n "dashboard.getDashboardCharts.invalidate" -B 2 -A 2

Repository: drifter089/orgOS

Length of output: 5361

🏁 Script executed:

# Check other role mutation hooks
fd -e ts -e tsx "use-.*role" src/app/teams/ | head -20

Repository: drifter089/orgOS

Length of output: 259

🏁 Script executed:

# Look for metric assignment patterns in mutations
rg -n "metricId" src/app/teams/[teamId]/hooks/ -B 3 -A 3

Repository: drifter089/orgOS

Length of output: 9557

Add dashboard cache invalidation to maintain UI consistency with role creation.

The cache invalidation is missing utils.dashboard.getDashboardCharts.invalidate({ teamId }). This is required to ensure dashboard charts reflect metric assignments when a role is created with a metricId. Other role mutations in the codebase follow this pattern (see use-auto-save.tsx, use-optimistic-role-update.ts, and role-card.tsx).

Add the following line after the existing invalidations:

void utils.dashboard.getDashboardCharts.invalidate({ teamId });
🤖 Prompt for AI Agents 
In @src/app/teams/[teamId]/hooks/use-create-role.tsx around lines 226 - 228, Add
dashboard cache invalidation after the existing team/role invalidations in
use-create-role (where utils.team.getById.invalidate and
utils.role.getByTeamId.invalidate are called): call
utils.dashboard.getDashboardCharts.invalidate({ teamId }) so dashboard charts
refresh when a role is created with a metricId, placing it immediately after the
two existing invalidate calls to match other mutations like use-auto-save.tsx
and use-optimistic-role-update.ts.

},
onError: (error, _variables, context) => {
if (context?.previousRoles !== undefined) {
Expand Down