a proof of concept realtime collaborative text editor using atproto as a sync server
jake.tngl.io/y-pds/
Improve styles
+27
-1
+7
-1
app.js
+7
-1
app.js
···
59
59
}
60
60
61
61
render() {
62
-
if (this.loading.value) return html`<p>loading…</p>`;
62
+
if (this.loading.value) return html`<${Loading} />`;
63
63
if (!this.did.value) return html`<${Login} />`;
64
64
return html`<${Editor} did=${this.did.value} atUri=${this.atUri.value} />`;
65
+
}
66
+
}
67
+
68
+
class Loading extends Component {
69
+
render() {
70
+
return html`<div class="loading"><p>loading…</p></div>`;
65
71
}
66
72
}
67
73
+20
style.css
+20
style.css
···
36
36
flex-direction: column;
37
37
}
38
38
39
+
.loading {
40
+
display: flex;
41
+
width: 100%;
42
+
height: 100%;
43
+
justify-content: center;
44
+
align-items: center;
45
+
opacity: 0;
46
+
animation: 1s fade-in 1s forwards;
47
+
}
48
+
49
+
@keyframes fade-in {
50
+
from {
51
+
opacity: 0;
52
+
}
53
+
54
+
to {
55
+
opacity: 1;
56
+
}
57
+
}
58
+
39
59
#editor {
40
60
flex: 1;
41
61
overflow-y: auto;