Add isLoading checking for the Example field in Create Listing Modal by lucaslyl · Pull Request #4250 · cardstack/boxel

lucaslyl · 2026-03-26T06:13:57Z

linear: https://linear.app/cardstack/issue/CS-10532/fix-example-missing-in-the-create-listing-modal

Add targetRealm and isLive options to the create listing modal's search resource so instances are scoped to the correct realm with live updates
Hide examples picker while search is loading to prevent showing stale/empty state
Fix search resource to properly clean up subscriptions and cached state when query becomes undefined (e.g. modal close), preventing subscription leaks
Add integration tests verifying that setting query to undefined clears cached state and tears down live subscriptions

lucaslyl · 2026-03-26T06:16:00Z

-          {{/if}}
+          {{#unless this.instancesSearch.isLoading}}
+            {{#if this.instanceOptions.length}}
+              <FieldContainer @label='Examples' class='field'>


add loading checking and also the instance length check else the fieldcontainer will still display if the search result is empty

{{#if this.instanceOptions.length}} =. showExampleRow

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: dbaa69cd63

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-03-26T06:17:39Z

+    getOwner(this)!,
+    () => (this.codeRef ? { filter: { type: this.codeRef } } : undefined),
+    undefined,
+    { isLive: true },


Avoid enabling live search without unsubscribe on close

Setting isLive: true here introduces a persistent background subscription after the modal is dismissed. CreateListingModal is always mounted (operator-mode/container.gts renders it unconditionally), and when the payload is cleared codeRef becomes undefined; in SearchResource.modify() (packages/host/app/resources/search.ts) that path returns early on query === undefined without unsubscribing existing live subscriptions or clearing #previousQuery. As a result, later realm index events can continue triggering search.perform(...) for the stale query even while the modal is closed, causing unnecessary live refresh traffic/work until the whole component is destroyed.

Useful? React with 👍 / 👎.

Seems good comment for leaking abstraction

so one observastion Ed noted way back when we did the card resources refactor is that "isLive" is kind of a lie. when you have a store that is driving your state, everything is always live. in fact you actually have to go thru weird acrobatics to make things not live. perhaps this is the same.

github-actions · 2026-03-26T06:20:45Z

Preview deployments

github-actions · 2026-03-26T06:36:16Z

Host Test Results

1 files ±0 1 suites ±0 2h 12m 17s ⏱️ + 1m 41s
2 063 tests +7 2 048 ✅ +7 15 💤 ±0 0 ❌ ±0
2 078 runs +7 2 063 ✅ +7 15 💤 ±0 0 ❌ ±0

Results for commit c2d7999. ± Comparison against base commit a2591cf.

♻️ This comment has been updated with latest results.

Copilot

Pull request overview

This PR improves the “Create Listing” modal’s Examples behavior by switching its instance lookup to live search, and tightens the search resource’s live-subscription lifecycle so subscriptions are torn down when the query is cleared.

Changes:

Add live-subscription teardown when SearchResource’s query becomes undefined, plus a helper for unsubscribing.
Add an integration test to verify live search stops reacting to realm index events after the query is cleared.
Update Create Listing modal to use live search for instances and hide the Examples field while the search is loading.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
`packages/host/app/resources/search.ts`	Adds `teardownLiveSubscriptions()` and clears live subscriptions when the query is absent.
`packages/host/tests/integration/resources/search-test.ts`	Adds coverage ensuring live searches stop re-fetching after clearing the query.
`packages/host/app/components/operator-mode/create-listing-modal.gts`	Enables live search for example instances and guards the Examples field behind `isLoading`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-26T22:15:34Z

+  private teardownLiveSubscriptions() {
+    for (let subscription of this.subscriptions) {
+      subscription.unsubscribe();
+    }
+    this.subscriptions = [];
+  }


SearchResource.modify() never tears down existing realm subscriptions when isLive flips from true to false (while query remains defined). In that case this.subscriptions stays active and the callback will keep triggering search.perform(...) even though the resource is no longer live. Consider calling teardownLiveSubscriptions() when !isLive (or when transitioning from live→non-live) to ensure subscriptions reflect the current args.

Copilot · 2026-03-26T22:15:34Z

+    getOwner(this)!,
+    () => (this.codeRef ? { filter: { type: this.codeRef } } : undefined),
+    undefined,
+    { isLive: true },


This getSearch(..., { isLive: true }) call does not provide realms, so the search resource will treat it as “all available realms” and will subscribe live to every realm in realmServer.availableRealmURLs. That can be very expensive (many live subscriptions + refreshes) for a modal; consider constraining realms (e.g. targetRealm and/or the realm of codeRef.module) or keeping this search non-live unless you explicitly need cross-realm live updates.

Suggested change

{ isLive: true },

{ isLive: false },

Copilot · 2026-03-26T22:15:34Z

+          {{#unless this.instancesSearch.isLoading}}
+            {{#if this.instanceOptions.length}}
+              <FieldContainer @label='Examples' class='field'>
+                <div class='field-contents' data-test-examples-container>
+                  <CardInstancePicker
+                    @placeholder='Select examples to include in the listing'
+                    @options={{this.instanceOptions}}
+                    @selected={{this.effectiveSelected}}
+                    @onChange={{this.onExampleChange}}
+                    @maxSelectedDisplay={{3}}
+                    data-test-create-listing-examples
+                  />
+                </div>
+              </FieldContainer>
+            {{/if}}
+          {{/unless}}


The Examples picker is now hidden while instancesSearch.isLoading, but the modal’s Create button remains enabled. If the user clicks Create before the search finishes, selectedExampleURLs can resolve to an empty list (because instances/instanceOptions haven’t populated yet), resulting in a listing created without the user’s intended examples. Consider disabling Create while instancesSearch.isLoading and/or having selectedExampleURLs fall back to payload.openCardIds when options haven’t loaded yet.

make sense ,agree with this

…scription leak

lucaslyl · 2026-03-27T02:51:02Z

@codex review

chatgpt-codex-connector · 2026-03-27T02:54:59Z

Codex Review: Didn't find any major issues. Keep them coming!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-27T07:48:04Z

+    // Simulate modal close: set query to undefined
+    args = { ...args, query: undefined as any };
+    search.modify([], args);


Using query: undefined as any weakens type-safety in a place where query is already typed as Query | undefined. Prefer passing plain undefined (and if the satisfies SearchResourceArgs['named'] constraint blocks that, it’s a sign the args type should be adjusted rather than casting away types).

Copilot · 2026-03-27T07:48:04Z

+    );
+
+    // Simulate modal close: set query to undefined
+    args = { ...args, query: undefined as any };


Same here: avoid query: undefined as any—it bypasses the intended Query | undefined typing and can mask real type regressions in the test.

Suggested change

args = { ...args, query: undefined as any };

args = { ...args, query: undefined };

tintinthong · 2026-03-30T01:02:45Z

-            </FieldContainer>
-          {{/if}}
+          {{#unless this.instancesSearch.isLoading}}
+            {{#if this.instanceOptions.length}}


still need to remove this right

The .length part

tintinthong · 2026-03-30T01:03:35Z

+    getOwner(this)!,
+    () => (this.codeRef ? { filter: { type: this.codeRef } } : undefined),
+    undefined,
+    { isLive: true },


Seems good comment for leaking abstraction

lucaslyl · 2026-03-31T14:47:23Z

Closing this, since it is being handled in #4283 due to a new requirement for this example field.

lucaslyl self-assigned this Mar 26, 2026

lucaslyl commented Mar 26, 2026

View reviewed changes

lucaslyl requested a review from a team March 26, 2026 06:16

chatgpt-codex-connector Bot reviewed Mar 26, 2026

View reviewed changes

habdelra requested a review from Copilot March 26, 2026 22:07

Copilot started reviewing on behalf of habdelra March 26, 2026 22:10 View session

Copilot AI reviewed Mar 26, 2026

View reviewed changes

Fix missing examples in create listing modal and search resource sub…

85c5592

…scription leak

lucaslyl force-pushed the CS-10532/fix-example-missing-in-the-create-listing-modal branch from 0fc3e47 to 85c5592 Compare March 27, 2026 02:49

fix lint

8f19f26

richardhjtan requested a review from Copilot March 27, 2026 07:41

Copilot started reviewing on behalf of richardhjtan March 27, 2026 07:44 View session

Copilot AI reviewed Mar 27, 2026

View reviewed changes

fix copilot feedback

c2d7999

tintinthong reviewed Mar 30, 2026

View reviewed changes

tintinthong requested changes Mar 30, 2026

View reviewed changes

lucaslyl closed this Mar 31, 2026

	args = { ...args, query: undefined as any };
	args = { ...args, query: undefined };

Conversation

lucaslyl commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lucaslyl Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

lucaslyl Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

tintinthong Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

habdelra Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Mar 26, 2026

Preview deployments

Uh oh!

github-actions Bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Host Test Results

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

lucaslyl Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

lucaslyl commented Mar 27, 2026

Uh oh!

chatgpt-codex-connector Bot commented Mar 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

tintinthong Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

tintinthong Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

tintinthong Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

lucaslyl commented Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

lucaslyl commented Mar 26, 2026 •

edited

Loading

habdelra Mar 30, 2026 •

edited

Loading

github-actions Bot commented Mar 26, 2026 •

edited

Loading