+13 -3

src/components/atoms/grain-spinner.js

reviewed

··· 1 1 import { LitElement, html, css } from 'lit'; 2 2 3 3 export class GrainSpinner extends LitElement { 4 4 + static properties = { 5 5 + size: { type: Number } 6 6 + }; 7 7 + 4 8 static styles = css` 5 9 :host { 6 10 display: flex; 7 11 justify-content: center; 8 12 align-items: center; 13 13 + } 14 14 + :host(:not([size])) { 9 15 width: 100%; 10 16 padding: var(--space-lg) 0; 11 17 } 12 18 .spinner { 13 19 display: block; 14 14 - width: 24px; 15 15 - height: 24px; 16 20 border: 2px solid var(--color-bg-elevated); 17 21 border-top-color: var(--color-text-secondary); 18 22 border-radius: 50%; ··· 23 27 } 24 28 `; 25 29 30 30 + constructor() { 31 31 + super(); 32 32 + this.size = null; 33 33 + } 34 34 + 26 35 render() { 27 27 - return html`<div class="spinner"></div>`; 36 36 + const size = this.size || 24; 37 37 + return html`<div class="spinner" style="width: ${size}px; height: ${size}px;"></div>`; 28 38 } 29 39 } 30 40

+2 -1

src/components/pages/grain-create-gallery.js

reviewed

··· 3 3 import { auth } from '../../services/auth.js'; 4 4 import { draftGallery } from '../../services/draft-gallery.js'; 5 5 import '../atoms/grain-icon.js'; 6 6 + import '../atoms/grain-spinner.js'; 6 7 7 8 const UPLOAD_BLOB_MUTATION = ` 8 9 mutation UploadBlob($data: String!, $mimeType: String!) { ··· 288 289 ?disabled=${!this.#canPost} 289 290 @click=${this.#handlePost} 290 291 > 291 291 - ${this._posting ? 'Posting...' : 'Post'} 292 292 + ${this._posting ? html`<grain-spinner size="16"></grain-spinner>` : 'Post'} 292 293 </button> 293 294 </div> 294 295