fix(ios): hide catalog item count labels and category filter behind search overlay

[Copilot]

On iOS, the FlatList's ListHeaderComponent ("Showing X of Y items") and CategoriesFilter remained rendered beneath the LargeTitleHeader search overlay, causing them to peek through at the top of the screen during active search.

Changes

• CatalogItemsScreen.tsx
  • isSearching now derives from raw searchValue.trim().length > 0 instead of the debounced value, so CategoriesFilter and ListHeaderComponent hide/show immediately when the user starts or clears the search — no 400ms lag
  • Added isQueryReady = debouncedSearchValue.trim().length > 0 to gate when vector search results are ready to display
  • Gate CategoriesFilter render on !isSearching
  • Return null from ListHeaderComponent when isSearching is true
  • Show the loading spinner in the search overlay while !isQueryReady || isVectorLoading, covering the debounce window before the vector fetch fires

const isSearching = searchValue.trim().length > 0;
const isQueryReady = debouncedSearchValue.trim().length > 0;

// ...

{!isSearching && (
  <CategoriesFilter ... />
)}

// ...

ListHeaderComponent={
  !isSearching ? (
    <View className="mb-4">
      <Text>{totalItemsText}</Text>
      {paginatedItems.length > 0 && <Text>{showingText}</Text>}
    </View>
  ) : null
}

// In search overlay content:
{isSearching ? (
  !isQueryReady || isVectorLoading ? (
    <ActivityIndicator ... />  // shown during debounce + fetch
  ) : (
    // results
  )
) : ...}

Both elements are restored immediately when the user clears the search.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>iOS – Catalog Search Overlay Shows "Showing X of Y Items" Label Peeking</issue_title>
<issue_description>Description:
On iOS, when using the Catalog search:

• Tapping the search icon overlays the search results screen correctly.
• However, the “Showing X of Y items” label peeks between the search bar and the results overlay, partially visible.

This creates a visual layering issue, making the UI appear broken or misaligned.

Steps to Reproduce:

1. Open the app on iOS
2. Navigate to the Catalog screen
3. Tap the Search icon
4. Observe the overlay and the “Showing X of Y items” label

Screenshots / Screen Recordings:

Expected Result:
The search overlay should completely cover the Catalog items and associated labels; no underlying text should peek through.

Actual Result:
The “Showing X of Y items” label is partially visible between the search bar and the results overlay.

Environment:

• Device: iPhone (13 Pro)

Additional Notes:

• This is iOS-specific</issue_description>

Comments on the Issue (you are @copilot in this section)

@andrew-bierman @copilot Assigned for POC development. Please investigate and create a proof of concept implementation.

• Fixes iOS – Catalog Search Overlay Shows "Showing X of Y Items" Label Peeking #1849

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

Summary by CodeRabbit

• Bug Fixes
  • Hide category filters during active search to streamline the experience.
  • Header now conditionally renders based on search state, removing unnecessary UI when searching.
  • Item count is shown only when browsing non-search results.
  • Improve search behavior: treat missing results as empty lists and show loading state while a query is preparing or remote search is in progress.

[andrew-bierman]

@coderabbitai Please review this PR for code quality, best practices, and potential issues.

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find the CatalogItemsScreen file
fd "CatalogItemsScreen" --type f

# Also check the git diff for this PR
git diff HEAD~1 HEAD --name-only

Length of output: 115

---

🏁 Script executed:

#!/bin/bash
cat apps/expo/features/catalog/screens/CatalogItemsScreen.tsx

Length of output: 9847

---

@andrew-bierman: The PR description image shows an iOS screenshot with "Showing 20 of 197,717 items" text peeking through a red-highlighted area just below the search bar overlay — the visual bug this PR is fixing.

The overall approach is correct and clean. Here's my review:

---

🐛 Critical – searchResults can be undefined at runtime

searchResults is derived as:

const searchResults = vectorResult?.items;

When vectorResult is undefined (e.g., before any result arrives, or on error), searchResults is undefined. It is then used without a null-guard:

{searchResults.length > 0 && ...}   // 💥 TypeError
{searchResults.map((item: CatalogItem) => ...)}  // 💥 TypeError

Fix:

const searchResults: CatalogItem[] = vectorResult?.items ?? [];

This also removes the need for the inline CatalogItem type annotation in .map().

---

⚠️ Medium – isSearching debounce delay partially re-introduces the peeking bug

isSearching is derived from the debounced value:

const isSearching = debouncedSearchValue.length > 0;

With a 400 ms debounce, the "Showing X of Y" label and CategoriesFilter remain visible for up to 400 ms after the user starts typing — the overlay appears, but the elements beneath it are still rendered, which can still produce the peeking effect during that window.

Fix: Use the raw searchValue to control the visibility guard, and keep debouncedSearchValue only for the actual API query:

const isSearching = searchValue.length > 0;         // instant hide/show
const isQueryReady = debouncedSearchValue.length > 0; // controls API call

Then gate useVectorSearch on isQueryReady (or pass debouncedSearchValue as-is, which you already do).

---

🔧 Minor – Unused destructured variable _isVectorFetching

isFetching: _isVectorFetching,

Since this value is never used, it can simply be removed from the destructuring to keep the code clean:

const {
  data: vectorResult,
  isLoading: isVectorLoading,
  error: vectorError,
} = useVectorSearch({ query: debouncedSearchValue, limit: 10 });

---

💡 Suggestion – key={activeFilter} on FlatList forces full remount

<FlatList key={activeFilter} ...>

Using key to remount the list on filter change is a quick workaround but causes the entire list (including scroll position, item caches, etc.) to be torn down and rebuilt. Consider using extraData={activeFilter} instead, and let the data prop change drive the re-render naturally. (Note: this is a pre-existing pattern, not introduced by this PR.)

---

✅ What's done well

• Gating both CategoriesFilter and ListHeaderComponent on !isSearching is the correct minimal fix.
• loadMore already correctly skips fetchNextPage when isSearching is true.
• ItemSeparatorComponent is correctly memoized with useMemo.
• Error and empty states are cleanly handled inline throughout.

[andrew-bierman]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3f7e2052-bd0a-4c9b-9071-ac6ed61c8270

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Introduced a debounced readiness flag and adjusted search state handling in CatalogItemsScreen.tsx: search uses raw input for isSearching, vector results default to an empty array, vector-loading considers query readiness, and category/header UI (CategoriesFilter and ListHeaderComponent) are conditionally hidden during active searches to prevent peeking.

Changes

Cohort / File(s)	Summary
Catalog search UI & logic apps/expo/features/catalog/screens/CatalogItemsScreen.tsx	Added isQueryReady (debounced readiness); changed isSearching to use the raw searchValue; defaulted vector search results to []; made vector-loading depend on loading OR query readiness; hid CategoriesFilter and conditionally rendered ListHeaderComponent/showingText only when not searching.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I hopped through code to tidy the scene,
Hid peeking labels so searches stay clean,
Debounced my queries, kept results in a row,
Filters tuck away while new answers glow. 🥕✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: hiding UI elements (catalog item count labels and category filter) behind the search overlay, matching the core issue fix.
Linked Issues check	✅ Passed	The PR successfully addresses the core requirement in #1849: hiding the ListHeaderComponent and CategoriesFilter during active search by making them conditional on !isSearching, preventing visual peeking under the overlay.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the search overlay issue: separating isSearching (raw value for immediate UI gating) from isQueryReady (debounced value for vector search), defaulting searchResults to prevent crashes, and conditionally rendering affected UI elements.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch copilot/fix-catalog-search-overlay-issue-again

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/expo/features/catalog/screens/CatalogItemsScreen.tsx`:
- Around line 164-173: The UI gating currently uses isSearching derived from
debouncedSearchValue which causes a 400ms lag; change isSearching in
CatalogItemsScreen to derive from the raw searchValue (e.g.,
Boolean(searchValue?.trim())) so the CategoriesFilter and list header hide/show
immediately, while keeping debouncedSearchValue only for triggering the vector
query and data fetch; update any places that check isSearching (filter render
and header render) to use the new isSearching derived from searchValue and leave
debouncedSearchValue usage confined to the query logic.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 059688ca-45d6-4d2f-be4b-9abefdf29e89

📥 Commits

Reviewing files that changed from the base of the PR and between 3f94763 and 45df246.

📒 Files selected for processing (1)

• apps/expo/features/catalog/screens/CatalogItemsScreen.tsx

[andrew-bierman]

@copilot Please address the CodeRabbit review feedback on this PR (1 inline comments).

[andrew-bierman]

@copilot CodeRabbit has reviewed this PR. Please address the feedback.

[andrew-bierman]

@copilot CodeRabbit has reviewed this PR. Please address the feedback.

[Copilot]

@copilot Please address the CodeRabbit review feedback on this PR (1 inline comments).

Addressed in c3e7a85. Changed isSearching to derive from raw searchValue.trim().length > 0 so the CategoriesFilter and ListHeaderComponent hide/show instantly without the 400ms debounce lag. Added isQueryReady = debouncedSearchValue.trim().length > 0 to gate the vector results display — the loading spinner now shows both while the debounce is pending and while the vector fetch is in flight, then results render once both are ready.

[andrew-bierman]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[andrew-bierman]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[andrew-bierman]

@copilot CodeRabbit has reviewed this PR. Please address the feedback.

[Copilot]

@copilot CodeRabbit has reviewed this PR. Please address the feedback.

All CodeRabbit feedback has been addressed — the single inline comment (400ms debounce lag for isSearching) was resolved in c3e7a85. The only remaining review thread is marked as resolved with no new open items.

[Copilot]

Pull request overview

Fixes an iOS layering issue in the Catalog screen where list header/count text and the category filter could remain visible underneath the LargeTitleHeader search overlay during active search.

Changes:

• Make isSearching derive from the raw (non-debounced) search input so header/filter hide immediately (no debounce lag).
• Add isQueryReady to show a loading state during the debounce window before vector search results are ready.
• Conditionally hide CategoriesFilter and FlatList’s ListHeaderComponent while searching.

---

You can also share your feedback on Copilot code review. Take the survey.

[cloudflare-workers-and-pages]

Deploying packrat-landing with    Cloudflare Pages

Latest commit:	c729966
Status:	✅  Deploy successful!
Preview URL:	https://850eb3e0.packrat-landing.pages.dev
Branch Preview URL:	https://copilot-fix-catalog-search-o.packrat-landing.pages.dev

View logs

[Isthisanmol]

Looks good to me and I have removed animate-pulse for now from categoryfilter as it was giving error. In future we can make custom custom component just like animate-pulse.