From 8388b18971bf38eefe1460fcd55f9e7261de674e Mon Sep 17 00:00:00 2001
From: Fadhlan Ridhwanallah <fridhwanallah@gmail.com>
Date: Wed, 21 Jan 2026 13:16:36 +0700
Subject: [PATCH 1/3] Fix: host mode does not indicate 404s well

---
 packages/host/app/index.html                  | 62 -------------------
 packages/host/app/templates/index.gts         | 11 ++--
 packages/host/app/templates/loading.gts       | 45 ++++++++++++++
 .../realm-server/prerender/manager-server.ts  |  2 +-
 .../scripts/wait-for-prerender.sh             |  2 +-
 5 files changed, 54 insertions(+), 68 deletions(-)
 create mode 100644 packages/host/app/templates/loading.gts
diff --git a/packages/host/app/index.html b/packages/host/app/index.html
index 763287b0eb..cdb36deefa 100644
--- a/packages/host/app/index.html
+++ b/packages/host/app/index.html
@@ -32,71 +32,9 @@
     <meta data-boxel-head-start />
     <meta data-boxel-head-end />
 
-    <style scoped>
-      #host-loading {
-        background-color: #686283;
-        display: flex;
-        align-items: center;
-        justify-items: center;
-        height: 100vh;
-      }
-
-      .loading-container {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 12px;
-      }
-
-      @keyframes spin {
-        to {
-          transform: rotate(360deg);
-        }
-      }
-
-      @media (prefers-reduced-motion: no-preference) {
-        .loading-indicator svg {
-          width: 20px;
-          height: 20px;
-          animation: spin 6s linear infinite;
-        }
-      }
-
-      .loading-text {
-        color: #fff;
-        font-size: 12px;
-        font-weight: 600;
-      }
-    </style>
   </head>
   <body>
     <script type="x/boundary" id="boxel-isolated-start"></script>
-    <div id="host-loading">
-      <div class="loading-container">
-        <div class="loading-indicator">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="15.5"
-            height="15.5"
-            viewBox="0 0 15.5 15.5"
-          >
-            <g
-              fill="none"
-              stroke="#00FFBA"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-            >
-              <path
-                d="M7.75.75v2.8M7.75 11.95v2.8M2.801 2.801l1.981 1.981M10.718 10.718l1.981 1.981M.75 7.75h2.8M11.95 7.75h2.8M2.801 12.699l1.981-1.981M10.718 4.782l1.981-1.981"
-              />
-            </g>
-          </svg>
-        </div>
-        <div class="loading-text">Loading…</div>
-      </div>
-    </div>
     <script type="x/boundary" id="boxel-isolated-end"></script>
 
     <!-- in case embercli's hooks insn't run,
diff --git a/packages/host/app/templates/index.gts b/packages/host/app/templates/index.gts
index b2091b5118..0ac5a8ca56 100644
--- a/packages/host/app/templates/index.gts
+++ b/packages/host/app/templates/index.gts
@@ -30,8 +30,6 @@ import PrerenderedCardSearch from '@cardstack/host/components/prerendered-card-s
 
 import config from '@cardstack/host/config/environment';
 
-import type IndexController from '@cardstack/host/controllers/index';
-
 import { getCardCollection } from '@cardstack/host/resources/card-collection';
 import { getCard } from '@cardstack/host/resources/card-resource';
 
@@ -49,6 +47,7 @@ import type {
 
 import type HostModeService from '../services/host-mode-service';
 import type OperatorModeStateService from '../services/operator-mode-state-service';
+import IndexController from '../controllers';
 
 export interface IndexComponentComponentSignature {
   Args: {
@@ -222,7 +221,7 @@ export class IndexComponent extends Component<IndexComponentComponentSignature>
       {{pageTitle this.title}}
 
       {{#if this.isError}}
-        <div data-test-error='not-found'>
+        <div data-test-error='not-found' class='not-found'>
           Card not found:
           {{@model.id}}
         </div>
@@ -242,12 +241,16 @@ export class IndexComponent extends Component<IndexComponentComponentSignature>
     {{/if}}
 
     <style scoped>
-      .host-mode-content {
+      .host-mode-content,
+      .not-found {
         height: 100%;
         position: fixed;
         top: 0;
         left: 0;
       }
+      .not-found {
+        z-index: 1;
+      }
     </style>
   </template>
 }
diff --git a/packages/host/app/templates/loading.gts b/packages/host/app/templates/loading.gts
new file mode 100644
index 0000000000..e3568b566e
--- /dev/null
+++ b/packages/host/app/templates/loading.gts
@@ -0,0 +1,45 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import RouteTemplate from 'ember-route-template';
+
+import { LoadingIndicator } from '@cardstack/boxel-ui/components';
+
+const Loading: TemplateOnlyComponent = <template>
+  <div id='host-loading'>
+    <div class='loading-container'>
+      <div class='loading-indicator'>
+        <LoadingIndicator @color='#00FFBA' />
+      </div>
+      <div class='loading-text'>Loading...</div>
+    </div>
+  </div>
+
+  <style scoped>
+    #host-loading {
+      background-color: #686283;
+      display: flex;
+      align-items: center;
+      justify-items: center;
+      height: 100vh;
+    }
+
+    .loading-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .loading-indicator {
+      --boxel-loading-indicator-size: 20px;
+    }
+
+    .loading-text {
+      color: #fff;
+      font-size: 12px;
+      font-weight: 600;
+    }
+  </style>
+</template>;
+
+export default RouteTemplate(Loading);
diff --git a/packages/realm-server/prerender/manager-server.ts b/packages/realm-server/prerender/manager-server.ts
index 70fe81449d..19bf09557e 100644
--- a/packages/realm-server/prerender/manager-server.ts
+++ b/packages/realm-server/prerender/manager-server.ts
@@ -25,7 +25,7 @@ let { port, exitOnSignal, forceExitTimeoutMs } = yargs(process.argv.slice(2))
     forceExitTimeoutMs: {
       description:
         'When exitOnSignal is true, force the process to exit after this timeout (ms)',
-      default: 1000,
+      default: 150000,
       type: 'number',
     },
   })
diff --git a/packages/realm-server/scripts/wait-for-prerender.sh b/packages/realm-server/scripts/wait-for-prerender.sh
index 465572dd25..bcd4402241 100755
--- a/packages/realm-server/scripts/wait-for-prerender.sh
+++ b/packages/realm-server/scripts/wait-for-prerender.sh
@@ -3,7 +3,7 @@
 wait_for_prerender() {
   local url="${1:-${PRERENDER_HEALTH_URL:-http://localhost:4221/}}"
   local trimmed_url="${url%/}/"
-  TIMEOUT_SECONDS=30
+  TIMEOUT_SECONDS=300
   START_TIME=$(date +%s)
 
   echo "Waiting for prerender server at ${trimmed_url}"

From 612f769942c92c0c61d954127e1a81b0abafbcb0 Mon Sep 17 00:00:00 2001
From: Fadhlan Ridhwanallah <fridhwanallah@gmail.com>
Date: Wed, 21 Jan 2026 18:09:49 +0700
Subject: [PATCH 2/3] Add tests

---
 packages/host/app/routes/index.gts            | 12 ++++++++++
 packages/host/app/templates/index.gts         |  3 ++-
 packages/host/app/templates/loading.gts       |  3 ++-
 .../host/tests/acceptance/host-mode-test.gts  | 22 ++++++++++++++++++-
 .../realm-server/prerender/manager-server.ts  |  2 +-
 .../scripts/wait-for-prerender.sh             |  2 +-
 6 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/packages/host/app/routes/index.gts b/packages/host/app/routes/index.gts
index 725a6623b8..2bf926bd29 100644
--- a/packages/host/app/routes/index.gts
+++ b/packages/host/app/routes/index.gts
@@ -1,3 +1,4 @@
+import { action } from '@ember/object';
 import Route from '@ember/routing/route';
 import type RouterService from '@ember/routing/router-service';
 import type Transition from '@ember/routing/transition';
@@ -55,6 +56,17 @@ export default class Card extends Route {
   @service declare realmServer: RealmServerService;
 
   didMatrixServiceStart = false;
+  initialLoading = true;
+
+  @action
+  loading(transition: Transition) {
+    transition.finally(() => {
+      // The loading template will be shown only during the initial load of the app
+      this.initialLoading = false;
+    });
+
+    return this.initialLoading;
+  }
 
   // WARNING! Make sure we are _very_ careful with our async in this model. This
   // model hook is called _every_  time
diff --git a/packages/host/app/templates/index.gts b/packages/host/app/templates/index.gts
index 0ac5a8ca56..7dc55dddf9 100644
--- a/packages/host/app/templates/index.gts
+++ b/packages/host/app/templates/index.gts
@@ -45,9 +45,10 @@ import type {
   ViewCardFn,
 } from 'https://cardstack.com/base/card-api';
 
+import type IndexController from '../controllers';
+
 import type HostModeService from '../services/host-mode-service';
 import type OperatorModeStateService from '../services/operator-mode-state-service';
-import IndexController from '../controllers';
 
 export interface IndexComponentComponentSignature {
   Args: {
diff --git a/packages/host/app/templates/loading.gts b/packages/host/app/templates/loading.gts
index e3568b566e..085124bd49 100644
--- a/packages/host/app/templates/loading.gts
+++ b/packages/host/app/templates/loading.gts
@@ -1,10 +1,11 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
 import RouteTemplate from 'ember-route-template';
 
 import { LoadingIndicator } from '@cardstack/boxel-ui/components';
 
 const Loading: TemplateOnlyComponent = <template>
-  <div id='host-loading'>
+  <div id='host-loading' data-test-host-loading>
     <div class='loading-container'>
       <div class='loading-indicator'>
         <LoadingIndicator @color='#00FFBA' />
diff --git a/packages/host/tests/acceptance/host-mode-test.gts b/packages/host/tests/acceptance/host-mode-test.gts
index 25e9355498..a95957778f 100644
--- a/packages/host/tests/acceptance/host-mode-test.gts
+++ b/packages/host/tests/acceptance/host-mode-test.gts
@@ -12,8 +12,10 @@ import { getPageTitle } from 'ember-page-title/test-support';
 import { module, test } from 'qunit';
 
 import { baseRealm } from '@cardstack/runtime-common';
+import { Deferred } from '@cardstack/runtime-common';
 
 import HostModeService from '@cardstack/host/services/host-mode-service';
+import type StoreService from '@cardstack/host/services/store';
 
 import {
   percySnapshot,
@@ -251,8 +253,23 @@ module('Acceptance | host mode tests', function (hooks) {
   });
 
   test('visiting a non-existent card shows an error', async function (assert) {
-    await visit('/test/Pet/non-existent.json');
+    let store = getService('store') as StoreService;
+    let originalGet = store.get.bind(store);
+    let gate = new Deferred<void>();
+    let targetId = `${testHostModeRealmURL}Pet/non-existent.json`;
+    store.get = async (id: string, ...rest: unknown[]) => {
+      if (id === targetId) {
+        await gate.promise;
+      }
+      return originalGet(id, ...(rest as []));
+    };
+
+    let visitPromise = visit('/test/Pet/non-existent.json');
+    await waitFor('[data-test-host-loading]');
+    assert.dom('[data-test-host-loading]').exists();
+    gate.fulfill();
 
+    await visitPromise;
     assert
       .dom('[data-test-error="not-found"]')
       .hasText(`Card not found: ${testHostModeRealmURL}Pet/non-existent`);
@@ -260,6 +277,9 @@ module('Acceptance | host mode tests', function (hooks) {
       getPageTitle(),
       `Card not found: ${testHostModeRealmURL}Pet/non-existent`,
     );
+    assert.dom('[data-test-host-loading]').doesNotExist();
+
+    store.get = originalGet;
   });
 
   test('invoking viewCard from a card stacks the linked card', async function (assert) {
diff --git a/packages/realm-server/prerender/manager-server.ts b/packages/realm-server/prerender/manager-server.ts
index 19bf09557e..70fe81449d 100644
--- a/packages/realm-server/prerender/manager-server.ts
+++ b/packages/realm-server/prerender/manager-server.ts
@@ -25,7 +25,7 @@ let { port, exitOnSignal, forceExitTimeoutMs } = yargs(process.argv.slice(2))
     forceExitTimeoutMs: {
       description:
         'When exitOnSignal is true, force the process to exit after this timeout (ms)',
-      default: 150000,
+      default: 1000,
       type: 'number',
     },
   })
diff --git a/packages/realm-server/scripts/wait-for-prerender.sh b/packages/realm-server/scripts/wait-for-prerender.sh
index bcd4402241..465572dd25 100755
--- a/packages/realm-server/scripts/wait-for-prerender.sh
+++ b/packages/realm-server/scripts/wait-for-prerender.sh
@@ -3,7 +3,7 @@
 wait_for_prerender() {
   local url="${1:-${PRERENDER_HEALTH_URL:-http://localhost:4221/}}"
   local trimmed_url="${url%/}/"
-  TIMEOUT_SECONDS=300
+  TIMEOUT_SECONDS=30
   START_TIME=$(date +%s)
 
   echo "Waiting for prerender server at ${trimmed_url}"

From dba330e2b9af9d9580d6aebb8de956569b761142 Mon Sep 17 00:00:00 2001
From: Fadhlan Ridhwanallah <fridhwanallah@gmail.com>
Date: Wed, 21 Jan 2026 18:18:47 +0700
Subject: [PATCH 3/3] rever index template changes

---
 packages/host/app/templates/index.gts | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/host/app/templates/index.gts b/packages/host/app/templates/index.gts
index 7dc55dddf9..b2091b5118 100644
--- a/packages/host/app/templates/index.gts
+++ b/packages/host/app/templates/index.gts
@@ -30,6 +30,8 @@ import PrerenderedCardSearch from '@cardstack/host/components/prerendered-card-s
 
 import config from '@cardstack/host/config/environment';
 
+import type IndexController from '@cardstack/host/controllers/index';
+
 import { getCardCollection } from '@cardstack/host/resources/card-collection';
 import { getCard } from '@cardstack/host/resources/card-resource';
 
@@ -45,8 +47,6 @@ import type {
   ViewCardFn,
 } from 'https://cardstack.com/base/card-api';
 
-import type IndexController from '../controllers';
-
 import type HostModeService from '../services/host-mode-service';
 import type OperatorModeStateService from '../services/operator-mode-state-service';
 
@@ -222,7 +222,7 @@ export class IndexComponent extends Component<IndexComponentComponentSignature>
       {{pageTitle this.title}}
 
       {{#if this.isError}}
-        <div data-test-error='not-found' class='not-found'>
+        <div data-test-error='not-found'>
           Card not found:
           {{@model.id}}
         </div>
@@ -242,16 +242,12 @@ export class IndexComponent extends Component<IndexComponentComponentSignature>
     {{/if}}
 
     <style scoped>
-      .host-mode-content,
-      .not-found {
+      .host-mode-content {
         height: 100%;
         position: fixed;
         top: 0;
         left: 0;
       }
-      .not-found {
-        z-index: 1;
-      }
     </style>
   </template>
 }
