Skip to content

Commit 5c03aab

Browse files
burieberryburieberry
authored
Do not show loading screen on hosted site (#4257)
* do not show loading screen on hosted site * update test logic * allow prerendered card scroll * wait for loaded host mode card * fix typo
1 parent 5d48ebc commit 5c03aab

5 files changed

Lines changed: 61 additions & 51 deletions

File tree

‎packages/host/app/components/host-mode/card.gts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Component from '@glimmer/component';
33
import { cached } from '@glimmer/tracking';
44

55
import { BoxelButton, CardContainer } from '@cardstack/boxel-ui/components';
6+
import { bool } from '@cardstack/boxel-ui/helpers';
67

78
import CardRenderer from '@cardstack/host/components/card-renderer';
89
import CardError from '@cardstack/host/components/operator-mode/card-error';
@@ -57,6 +58,7 @@ export default class HostModeCard extends Component<Signature> {
5758
<CardContainer
5859
class='host-mode-card {{if @isPrimary "is-primary"}}'
5960
displayBoundaries={{@displayBoundaries}}
61+
data-test-host-mode-card-loaded={{bool this.card}}
6062
...attributes
6163
>
6264
{{#if this.cardError}}

‎packages/host/app/index.html‎

Lines changed: 51 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,54 @@
11
<!doctype html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8" />
6-
<meta name="description" content="" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1" />
8-
9-
{{content-for "head"}}
10-
11-
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
12-
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/@cardstack/host.css" />
13-
<link rel="preconnect" href="https://fonts.googleapis.com" />
14-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15-
<link
16-
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
17-
rel="stylesheet" />
18-
19-
{{content-for "head-footer"}}
20-
21-
<meta data-boxel-head-start />
22-
<title>Boxel</title>
23-
<meta data-boxel-head-end />
24-
25-
</head>
26-
27-
<body>
28-
<script type="x/boundary" id="boxel-isolated-start"></script>
29-
<script type="x/boundary" id="boxel-isolated-end"></script>
30-
31-
<!-- in case embercli's hooks insn't run,
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="description" content="" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
8+
{{content-for "head"}}
9+
10+
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
11+
<link
12+
integrity=""
13+
rel="stylesheet"
14+
href="{{rootURL}}assets/@cardstack/host.css"
15+
/>
16+
<style>
17+
/* Allow prerendered cards to scroll while card-specific CSS loads */
18+
#boxel-isolated-start + .boxel-card-container {
19+
overflow-y: auto;
20+
}
21+
</style>
22+
<link rel="preconnect" href="https://fonts.googleapis.com" />
23+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
24+
<link
25+
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
26+
rel="stylesheet"
27+
/>
28+
29+
{{content-for "head-footer"}}
30+
31+
<meta data-boxel-head-start />
32+
<title>Boxel</title>
33+
<meta data-boxel-head-end />
34+
</head>
35+
36+
<body>
37+
<script type="x/boundary" id="boxel-isolated-start"></script>
38+
<script type="x/boundary" id="boxel-isolated-end"></script>
39+
40+
<!-- in case embercli's hooks insn't run,
3241
we embed the following div manually -->
33-
<div id="ember-basic-dropdown-wormhole"></div>
34-
{{content-for "body"}}
35-
36-
<script type="module">
37-
import * as ContentTag from '{{rootURL}}assets/content-tag/standalone.js';
38-
globalThis.ContentTagGlobal = ContentTag;
39-
</script>
40-
<script src="{{rootURL}}assets/vendor.js"></script>
41-
<script src="{{rootURL}}assets/@cardstack/host.js"></script>
42-
43-
{{content-for "body-footer"}}
44-
</body>
45-
46-
</html>
42+
<div id="ember-basic-dropdown-wormhole"></div>
43+
{{content-for "body"}}
44+
45+
<script type="module">
46+
import * as ContentTag from '{{rootURL}}assets/content-tag/standalone.js';
47+
globalThis.ContentTagGlobal = ContentTag;
48+
</script>
49+
<script src="{{rootURL}}assets/vendor.js"></script>
50+
<script src="{{rootURL}}assets/@cardstack/host.js"></script>
51+
52+
{{content-for "body-footer"}}
53+
</body>
54+
</html>

‎packages/host/app/routes/index.gts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default class Card extends Route {
6565
this.initialLoading = false;
6666
});
6767

68-
return this.initialLoading;
68+
return this.initialLoading && !this.hostModeService.isActive;
6969
}
7070

7171
// WARNING! Make sure we are _very_ careful with our async in this model. This

‎packages/host/tests/acceptance/host-mode-test.gts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -282,18 +282,22 @@ module('Acceptance | host mode tests', function (hooks) {
282282
let store = getService('store') as StoreService;
283283
let originalGet = store.get.bind(store);
284284
let gate = new Deferred<void>();
285+
let pending = new Deferred<void>();
285286
let targetId = `${testHostModeRealmURL}Pet/non-existent.json`;
286287
store.get = (async (...args: Parameters<StoreService['get']>) => {
287288
let [id] = args;
288289
if (id === targetId) {
290+
pending.fulfill();
289291
await gate.promise;
290292
}
291293
return (originalGet as StoreService['get'])(...args);
292294
}) as StoreService['get'];
293295

294296
let visitPromise = visit('/test/Pet/non-existent.json');
295-
await waitFor('[data-test-host-loading]');
296-
assert.dom('[data-test-host-loading]').exists();
297+
await pending.promise; // store.get is now blocked — loading state is active
298+
assert
299+
.dom('[data-test-host-loading]')
300+
.doesNotExist('Loading screen is never shown on host mode');
297301
gate.fulfill();
298302

299303
await visitPromise;

‎packages/matrix/tests/host-mode.spec.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -257,11 +257,7 @@ test.describe('Host mode', () => {
257257
}) => {
258258
await page.goto(publishedWhitePaperCardURL);
259259
await page.locator('[data-test-white-paper]').waitFor();
260-
await waitUntil(
261-
async () =>
262-
(await page.locator('[data-test-host-loading]').count()) === 0,
263-
);
264-
260+
await page.locator('[data-test-host-mode-card-loaded]').waitFor();
265261
await page.emulateMedia({ media: 'print' });
266262
let pdf = await page.pdf({ format: 'Letter', printBackground: true });
267263
let pageCount =

0 commit comments

Comments
 (0)