fix: handle pending and error states in CannedResponseList

[sezallagwal]

Resolves the TODO in WrapCannedResponseList.tsx to handle pending and error states for the canned responses list.

Changes

WrapCannedResponseList.tsx

• Destructure isPending and error from useCannedResponseList()
• Pass them as loading and error props to CannedResponseList
• Remove TODO comment

CannedResponseList.tsx

• Add loading and error to component props
• Show Throbber spinner while data is loading
• Show Callout type='danger' when the API request fails
• Guard empty state (No Canned Responses) with !loading && !error so it only appears when the request succeeds with zero results

Summary by CodeRabbit

• New Features
  • Canned responses list now shows a loading indicator and displays a clear error message when fetching fails.
• Bug Fixes
  • Empty-state is suppressed while loading or on error so users see the proper feedback instead of an empty list.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: b036c96

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f234a5b and 96abbbb.

📒 Files selected for processing (1)

• apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx

🧠 Learnings (1)

📚 Learning: 2025-11-19T18:20:07.720Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 37419
File: packages/i18n/src/locales/en.i18n.json:918-921
Timestamp: 2025-11-19T18:20:07.720Z
Learning: Repo: RocketChat/Rocket.Chat — i18n/formatting
Learning: This repository uses a custom message formatting parser in UI blocks/messages; do not assume standard Markdown rules. For keys like Call_ended_bold, Call_not_answered_bold, Call_failed_bold, and Call_transferred_bold in packages/i18n/src/locales/en.i18n.json, retain the existing single-asterisk emphasis unless maintainers request otherwise.

Applied to files:

• apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx

🧬 Code graph analysis (1)

apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx (1)

packages/ui-client/src/components/Contextualbar/index.ts (1)

• ContextualbarEmptyContent (34-34)

🔇 Additional comments (3)

apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx (3)

23-40: Props look good.

The loading: boolean and error: unknown prop additions are well-typed. Using unknown for the error type is the correct choice since React Query can return various error shapes.

---

108-112: Loading indicator implementation is clean.

---

120-121: Empty-state guard is correct.

The !loading && !error && itemCount === 0 condition properly ensures the empty message only appears on a successful fetch with zero results. The item list rendering at line 121 appropriately remains independent, which aligns with showing cached data during background refetches — a standard React Query pattern.

---

Walkthrough

Added explicit loading and error props to the canned responses list flow. The wrapper hook now surfaces isPending and error, which are passed to the list component; the component renders Throbber when loading and Callout when an error exists, and only shows the empty state when neither is present.

Changes

Cohort / File(s)	Summary
Canned Response List Component apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx	Added loading: boolean and error: unknown to CannedResponseListProps. Integrated Throbber and Callout; render loading and error states before empty-state fallback.
Canned Response List Wrapper & Hook usage apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx	Destructures isPending and error from useCannedResponseList and passes them as loading={isPending} and error={error} to CannedResponseList. Removed prior placeholder for pending/error handling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 Spinning throbbers, gentle and quick,
Callouts catch what went amiss,
Lists stay calm when loads are thick,
Empty views wait — they won’t dismiss. ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: handle pending and error states in CannedResponseList' accurately and directly describes the main change in the pull request, which adds handling for pending and error states to the CannedResponseList component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into develop

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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 and usage tips.}

[cubic-dev-ai]

No issues found across 2 files

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
`@apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx`:
- Around line 108-120: The rendering logic in CannedResponseList is
inconsistent: it shows the error Callout only when error instanceof Error but
treats any truthy error as blocking the empty state with !error, which can leave
the UI blank for non-Error truthy values. Fix by normalizing the check so any
truthy error renders the Callout (replace the error instanceof Error check with
a truthy check on error) and render a safe string via error?.toString() ||
t('Unknown_error') for the Callout message; keep the empty-state guard as !error
&& !loading && itemCount === 0 so ContextualbarEmptyContent displays only when
there is no error. Reference: variables loading, error, itemCount and components
Callout and ContextualbarEmptyContent in CannedResponseList.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 11e1c51 and f234a5b.

📒 Files selected for processing (2)

• apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx
• apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx
• apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx

🧠 Learnings (1)

📚 Learning: 2025-11-19T18:20:07.720Z

Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 37419
File: packages/i18n/src/locales/en.i18n.json:918-921
Timestamp: 2025-11-19T18:20:07.720Z
Learning: Repo: RocketChat/Rocket.Chat — i18n/formatting
Learning: This repository uses a custom message formatting parser in UI blocks/messages; do not assume standard Markdown rules. For keys like Call_ended_bold, Call_not_answered_bold, Call_failed_bold, and Call_transferred_bold in packages/i18n/src/locales/en.i18n.json, retain the existing single-asterisk emphasis unless maintainers request otherwise.

Applied to files:

• apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx

🧬 Code graph analysis (2)

apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx (1)

packages/ui-client/src/components/Contextualbar/index.ts (1)

• ContextualbarEmptyContent (34-34)

apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx (1)

apps/meteor/client/views/omnichannel/hooks/useCannedResponseList.ts (1)

• useCannedResponseList (7-59)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: cubic · AI code reviewer

🔇 Additional comments (3)

apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/WrapCannedResponseList.tsx (1)

34-34: LGTM — clean integration of pending/error states from the query hook.

isPending and error from useInfiniteQuery are correctly destructured and forwarded. isPending is the right choice here (true only when no cached data exists), as opposed to isFetching which would also fire during background refetches and next-page loads.

Also applies to: 74-75

apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx (2)

27-28: LGTM on the new props.

Typing error as unknown aligns well with what hooks like React Query return.

---

121-143: LGTM on the list rendering section.

The existing list rendering remains correctly unaffected by the new loading/error states, and both can coexist (e.g., showing a spinner during a refetch while stale items are still visible).