nichoth.com
forked from
grain.social/grain-pwa
WIP PWA for Grain
feat: add spinner to post button during gallery creation
chadtmiller.com
+15
-4
+13
-3
src/components/atoms/grain-spinner.js
+13
-3
src/components/atoms/grain-spinner.js
···
1
1
import { LitElement, html, css } from 'lit';
2
2
3
3
export class GrainSpinner extends LitElement {
4
+
static properties = {
5
+
size: { type: Number }
6
+
};
7
+
4
8
static styles = css`
5
9
:host {
6
10
display: flex;
7
11
justify-content: center;
8
12
align-items: center;
13
+
}
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
-
width: 24px;
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
+
constructor() {
31
+
super();
32
+
this.size = null;
33
+
}
34
+
26
35
render() {
27
-
return html`<div class="spinner"></div>`;
36
+
const size = this.size || 24;
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
+2
-1
src/components/pages/grain-create-gallery.js
···
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
+
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
-
${this._posting ? 'Posting...' : 'Post'}
292
+
${this._posting ? html`<grain-spinner size="16"></grain-spinner>` : 'Post'}
292
293
</button>
293
294
</div>
294
295