Skip to content

Commit 0b63235

Browse files
mbostockmbostock
authored
workaround Safari loading bug (#1300)
* workaround Safari loading bug * update test snapshots
1 parent e8d11f7 commit 0b63235

25 files changed

+53
-51
lines changed

‎src/client/main.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function define(cell) {
2727
cellsById.get(id)?.variables.forEach((v) => v.delete());
2828
cellsById.set(id, {cell, variables});
2929
const root = document.querySelector(`#cell-${id}`);
30-
const loading = root.classList.contains("observablehq--loading");
30+
const loading = root.querySelector(".observablehq-loading");
3131
const pending = () => reset(root, loading);
3232
const rejected = (error) => reject(root, error);
3333
const v = main.variable({_node: root, pending, rejected}, {shadow: {}}); // _node for visibility promise
@@ -41,7 +41,7 @@ export function define(cell) {
4141
let version = v._version; // capture version on input change
4242
return (value) => {
4343
if (version < displayVersion) throw new Error("stale display");
44-
else if (version > displayVersion) root.classList.remove("observablehq--loading"), clear(root);
44+
else if (version > displayVersion) clear(root);
4545
displayVersion = version;
4646
display(root, value);
4747
return value;
@@ -69,14 +69,13 @@ export function define(cell) {
6969
function reset(root, loading) {
7070
if (root.classList.contains("observablehq--error")) {
7171
root.classList.remove("observablehq--error");
72-
root.classList.toggle("observablehq--loading", loading);
7372
clear(root);
73+
if (loading) root.append(loading);
7474
}
7575
}
7676

7777
function reject(root, error) {
7878
console.error(error);
79-
root.classList.remove("observablehq--loading");
8079
root.classList.add("observablehq--error"); // see reset
8180
clear(root);
8281
root.append(inspectError(error));

‎src/markdown.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,9 @@ function makeFenceRenderer(baseRenderer: RenderRule): RenderRule {
107107
// TODO const sourceLine = context.startLine + context.currentLine;
108108
const node = parseJavaScript(source, {path});
109109
context.code.push({id, node});
110-
html += `<div id="cell-${id}" class="observablehq observablehq--block${
111-
node.expression ? " observablehq--loading" : ""
112-
}"></div>\n`;
110+
html += `<div id="cell-${id}" class="observablehq observablehq--block">${
111+
node.expression ? '<span class="observablehq-loading"></span>' : ""
112+
}</div>\n`;
113113
}
114114
} catch (error) {
115115
if (!(error instanceof SyntaxError)) throw error;
@@ -262,7 +262,7 @@ function makePlaceholderRenderer(): RenderRule {
262262
// TODO sourceLine: context.startLine + context.currentLine
263263
const node = parseJavaScript(token.content, {path, inline: true});
264264
context.code.push({id, node});
265-
return `<span id="cell-${id}" class="observablehq--loading"></span>`;
265+
return `<span id="cell-${id}"><span class="observablehq-loading"></span></span>`;
266266
} catch (error) {
267267
if (!(error instanceof SyntaxError)) throw error;
268268
return `<span id="cell-${id}">

‎src/style/inspector.css

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.observablehq--block:not(.observablehq--loading):empty {
1+
.observablehq--block:empty {
22
margin: 0;
33
}
44

@@ -11,8 +11,7 @@
1111
}
1212
}
1313

14-
.observablehq--loading::before {
15-
content: "↻";
14+
.observablehq-loading {
1615
font: var(--monospace-font);
1716
color: var(--theme-foreground-muted);
1817
display: inline-block;
@@ -23,7 +22,11 @@
2322
animation-iteration-count: infinite;
2423
}
2524

26-
.observablehq--block.observablehq--loading::before {
25+
.observablehq-loading::before {
26+
content: "↻";
27+
}
28+
29+
.observablehq--block .observablehq-loading {
2730
display: block;
2831
}
2932

‎test/output/block-expression.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<div><span id="cell-6212702c" class="observablehq--loading"></span></div>
1+
<div><span id="cell-6212702c"><span class="observablehq-loading"></span></span></div>

‎test/output/build/archives.posix/tar.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,13 @@
8686
<div id="observablehq-center">
8787
<main id="observablehq-main" class="observablehq">
8888
<h1 id="tar" tabindex="-1"><a class="observablehq-header-anchor" href="#tar">Tar</a></h1>
89-
<div id="cell-d5134368" class="observablehq observablehq--block observablehq--loading"></div>
90-
<div id="cell-a0c06958" class="observablehq observablehq--block observablehq--loading"></div>
91-
<div id="cell-d84cd7fb" class="observablehq observablehq--block observablehq--loading"></div>
92-
<div id="cell-86bd51aa" class="observablehq observablehq--block observablehq--loading"></div>
93-
<div id="cell-95938c22" class="observablehq observablehq--block observablehq--loading"></div>
94-
<div id="cell-7e5740fd" class="observablehq observablehq--block observablehq--loading"></div>
95-
<div id="cell-d0a58efd" class="observablehq observablehq--block observablehq--loading"></div>
89+
<div id="cell-d5134368" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
90+
<div id="cell-a0c06958" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
91+
<div id="cell-d84cd7fb" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
92+
<div id="cell-86bd51aa" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
93+
<div id="cell-95938c22" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
94+
<div id="cell-7e5740fd" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
95+
<div id="cell-d0a58efd" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
9696
</main>
9797
<footer id="observablehq-footer">
9898
<nav><a rel="prev" href="./"><span>Home</span></a><a rel="next" href="./zip"><span>Zip</span></a></nav>

‎test/output/build/archives.posix/zip.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,10 @@
6969
<div id="observablehq-center">
7070
<main id="observablehq-main" class="observablehq">
7171
<h1 id="zip" tabindex="-1"><a class="observablehq-header-anchor" href="#zip">Zip</a></h1>
72-
<div id="cell-d3b9d0ee" class="observablehq observablehq--block observablehq--loading"></div>
73-
<div id="cell-bab54217" class="observablehq observablehq--block observablehq--loading"></div>
74-
<div id="cell-11eec300" class="observablehq observablehq--block observablehq--loading"></div>
75-
<div id="cell-ee2310f3" class="observablehq observablehq--block observablehq--loading"></div>
72+
<div id="cell-d3b9d0ee" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
73+
<div id="cell-bab54217" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
74+
<div id="cell-11eec300" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
75+
<div id="cell-ee2310f3" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
7676
<div id="cell-f9a513d8" class="observablehq observablehq--block"></div>
7777
</main>
7878
<footer id="observablehq-footer">

‎test/output/build/archives.win32/tar.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,9 @@
5858
<div id="observablehq-center">
5959
<main id="observablehq-main" class="observablehq">
6060
<h1 id="tar" tabindex="-1"><a class="observablehq-header-anchor" href="#tar">Tar</a></h1>
61-
<div id="cell-d5134368" class="observablehq observablehq--block observablehq--loading"></div>
62-
<div id="cell-a0c06958" class="observablehq observablehq--block observablehq--loading"></div>
63-
<div id="cell-d84cd7fb" class="observablehq observablehq--block observablehq--loading"></div>
61+
<div id="cell-d5134368" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
62+
<div id="cell-a0c06958" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
63+
<div id="cell-d84cd7fb" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
6464
</main>
6565
<footer id="observablehq-footer">
6666
<nav><a rel="prev" href="./"><span>Home</span></a><a rel="next" href="./zip"><span>Zip</span></a></nav>

‎test/output/build/archives.win32/zip.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@
5151
<div id="observablehq-center">
5252
<main id="observablehq-main" class="observablehq">
5353
<h1 id="zip" tabindex="-1"><a class="observablehq-header-anchor" href="#zip">Zip</a></h1>
54-
<div id="cell-d3b9d0ee" class="observablehq observablehq--block observablehq--loading"></div>
55-
<div id="cell-bab54217" class="observablehq observablehq--block observablehq--loading"></div>
54+
<div id="cell-d3b9d0ee" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
55+
<div id="cell-bab54217" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
5656
</main>
5757
<footer id="observablehq-footer">
5858
<nav><a rel="prev" href="./tar"><span>Tar</span></a></nav>

‎test/output/build/files/files.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@
6767
<link rel="stylesheet" href="./_file/custom-styles.b072c9c8.css">
6868
<link rel="stylesheet" href="./_file/subsection/additional-styles.3a854b3a.css">
6969
<link rel="stylesheet" href="https://example.com/style.css">
70-
<div id="cell-10037545" class="observablehq observablehq--block observablehq--loading"></div>
71-
<div id="cell-453a8147" class="observablehq observablehq--block observablehq--loading"></div>
72-
<div id="cell-444c421e" class="observablehq observablehq--block observablehq--loading"></div>
73-
<div id="cell-cee3ab67" class="observablehq observablehq--block observablehq--loading"></div>
70+
<div id="cell-10037545" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
71+
<div id="cell-453a8147" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
72+
<div id="cell-444c421e" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
73+
<div id="cell-cee3ab67" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
7474
<p><img src="./_file/observable logo small.8a915536.png" alt=""></p>
7575
</main>
7676
<footer id="observablehq-footer">

‎test/output/build/files/subsection/subfiles.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@
5252
<main id="observablehq-main" class="observablehq">
5353
<link rel="stylesheet" href="../_file/custom-styles.b072c9c8.css">
5454
<link rel="stylesheet" href="../_file/subsection/additional-styles.3a854b3a.css">
55-
<div id="cell-ef9a31ef" class="observablehq observablehq--block observablehq--loading"></div>
56-
<div id="cell-834ecf9f" class="observablehq observablehq--block observablehq--loading"></div>
55+
<div id="cell-ef9a31ef" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
56+
<div id="cell-834ecf9f" class="observablehq observablehq--block"><span class="observablehq-loading"></span></div>
5757
</main>
5858
<footer id="observablehq-footer">
5959
<nav><a rel="prev" href="../files"><span>Untitled</span></a></nav>

0 commit comments

Comments
 (0)