a proof of concept realtime collaborative text editor using atproto as a sync server jake.tngl.io/y-pds/
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

Improve styles

+27 -1
+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
··· 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;