Tag chips: no page progress bar, loader on the chip, community title for community ids

[feruzm]

Two follow-ups on the post footer chips from #1715.

No page progress bar, loader on the chip (#1717)

Pressing the follow control on a tag chip started the top-of-page progress bar as if a navigation had begun. The progress library attaches a capture-phase click listener to every anchor, so it fires before the control can stop the click. The control now carries the library's own opt-out, data-prevent-progress="true", which it reads off the clicked element or any ancestor below the anchor, so a click on the icon is covered too. The chip's link keeps its bar for a real navigation.

While a follow or unfollow is in flight the chip control shows a spinner in place of its icon, so the loading state sits on the chip rather than on the page.

A community chip reads as the community's title

The footer showed hive-125125 where the header names the community. TagChipLabel names a community id by its title: the post's own community straight from the entry, with no lookup, and any other community id in the tag list from the same cache entry the community pages use, with the id standing in until it resolves. Plain tags read as themselves.

Tests

The chip spec asserts the opt-out attribute and the spinner during a held list refetch. entry-tags.spec.tsx asserts the post's community is titled without a lookup, plain tags are untouched, and another community id resolves to its title. Typecheck, lint and the icon audit clean.

Closes #1717

[qodo-code-review]

ⓘ Qodo reviews are paused because your trial has ended. Ask your workspace admin to add credits to resume reviews. Manage billing

[coderabbitai]

Warning

Review limit reached

Next included review available in 7 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Team

Run ID: 4b0bc069-2287-44d0-aba1-dfe12399f151

📥 Commits

Reviewing files that changed from the base of the PR and between 94adf20 and dedd03f.

📒 Files selected for processing (5)

• apps/web/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-tags.tsx
• apps/web/src/features/shared/follow-tag-btn/index.tsx
• apps/web/src/features/shared/tag/tag-chip-label.tsx
• apps/web/src/specs/features/entry/entry-tags.spec.tsx
• apps/web/src/specs/features/shared/follow-tag-btn.spec.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Tip of the day

💡 Did you know, you can turn on the rule miner and Qodo learns your standards from review history

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Prevent page progress for tag-chip follow actions

🐞 Bug fix ✨ Enhancement 🧪 Tests 🕐 10-20 Minutes

AI Description

• Prevent tag-chip follow actions from triggering the page navigation progress bar.
• Show an inline spinner while follow state is loading or mutating.
• Cover progress suppression and loading feedback with component tests.

Diagram

sequenceDiagram
  actor U as User
  participant P as Progress Bar
  participant C as Tag Chip
  participant H as Follow Hook
  participant Q as Query Cache
  U->>P: Click captured
  P->>C: Read opt-out
  P-->>P: Skip page bar
  U->>C: Activate toggle
  C->>H: Follow or unfollow
  H->>Q: Mutate and refetch
  Q-->>C: Report busy state
  C-->>U: Render spinner

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Place the control outside the tag link

• ➕ Avoids coupling the control to anchor click interception.
• ➕ Produces a cleaner separation between navigation and mutation interactions.
• ➖ Requires restructuring chip layout and click-target behavior.
• ➖ Creates broader regression risk for styling, focus, and navigation interactions.

2. Change progress handling globally

• ➕ Could automatically suppress progress for all nested in-place controls.
• ➕ Removes the need for per-control opt-out attributes.
• ➖ Broadens the fix beyond the reported tag-chip issue.
• ➖ May suppress legitimate navigation progress or require progress-library customization.

Recommendation: Keep the PR's scoped use of the progress library's supported opt-out. It directly addresses capture-phase handling, preserves progress for genuine tag navigation, and adds local loading feedback without restructuring the chip or changing global navigation behavior.

Files changed (2) +29 / -2

Bug fix (1) +14 / -2

index.tsxSuppress page progress and render chip loading feedback +14/-2

Suppress page progress and render chip loading feedback

• Adds the progress library's opt-out attribute to the embedded tag follow control so capture-phase clicks do not start navigation progress. Displays a spinning icon while signed-in follow data is loading, refetching, or mutating.

apps/web/src/features/shared/follow-tag-btn/index.tsx

Tests (1) +15 / -0

follow-tag-btn.spec.tsxTest progress opt-out and inline spinner states +15/-0

Test progress opt-out and inline spinner states

• Verifies the chip control carries the page-progress opt-out attribute. Extends the held-refetch test to assert that busy state is represented by an inline spinner.

apps/web/src/specs/features/shared/follow-tag-btn.spec.tsx