WIP PWA for Grain
feat: add loading spinner to action dialog
+29
-14
+26
-13
src/components/organisms/grain-action-dialog.js
+26
-13
src/components/organisms/grain-action-dialog.js
···
1
1
import { LitElement, html, css } from 'lit';
2
+
import '../atoms/grain-spinner.js';
2
3
3
4
export class GrainActionDialog extends LitElement {
4
5
static properties = {
5
6
open: { type: Boolean, reflect: true },
6
-
actions: { type: Array }
7
+
actions: { type: Array },
8
+
loading: { type: Boolean }
7
9
};
8
10
9
11
static styles = css`
···
55
57
.action-button.cancel {
56
58
color: var(--color-text-secondary);
57
59
}
60
+
.loading {
61
+
padding: 24px;
62
+
display: flex;
63
+
justify-content: center;
64
+
}
58
65
`;
59
66
60
67
constructor() {
61
68
super();
62
69
this.open = false;
63
70
this.actions = [];
71
+
this.loading = false;
64
72
}
65
73
66
74
#handleOverlayClick(e) {
67
-
if (e.target.classList.contains('overlay')) {
75
+
if (e.target.classList.contains('overlay') && !this.loading) {
68
76
this.#close();
69
77
}
70
78
}
···
75
83
bubbles: true,
76
84
composed: true
77
85
}));
78
-
this.#close();
79
86
}
80
87
81
88
#close() {
···
89
96
return html`
90
97
<div class="overlay" @click=${this.#handleOverlayClick}>
91
98
<div class="dialog">
92
-
${this.actions.map(item => html`
93
-
<button
94
-
class="action-button ${item.danger ? 'danger' : ''}"
95
-
@click=${() => this.#handleAction(item.action)}
96
-
>
97
-
${item.label}
99
+
${this.loading ? html`
100
+
<div class="loading">
101
+
<grain-spinner></grain-spinner>
102
+
</div>
103
+
` : html`
104
+
${this.actions.map(item => html`
105
+
<button
106
+
class="action-button ${item.danger ? 'danger' : ''}"
107
+
@click=${() => this.#handleAction(item.action)}
108
+
>
109
+
${item.label}
110
+
</button>
111
+
`)}
112
+
<button class="action-button cancel" @click=${this.#close}>
113
+
Cancel
98
114
</button>
99
-
`)}
100
-
<button class="action-button cancel" @click=${this.#close}>
101
-
Cancel
102
-
</button>
115
+
`}
103
116
</div>
104
117
</div>
105
118
`;
+3
-1
src/components/pages/grain-gallery-detail.js
+3
-1
src/components/pages/grain-gallery-detail.js
···
175
175
} catch (err) {
176
176
console.error('Failed to delete gallery:', err);
177
177
this._error = 'Failed to delete gallery. Please try again.';
178
+
this._menuOpen = false;
178
179
} finally {
179
180
this._deleting = false;
180
181
}
···
235
236
236
237
<grain-action-dialog
237
238
?open=${this._menuOpen}
238
-
.actions=${[{ label: this._deleting ? 'Deleting...' : 'Delete', action: 'delete', danger: true }]}
239
+
?loading=${this._deleting}
240
+
.actions=${[{ label: 'Delete', action: 'delete', danger: true }]}
239
241
@action=${this.#handleAction}
240
242
@close=${this.#handleMenuClose}
241
243
></grain-action-dialog>