WIP PWA for Grain

feat: show 'Deleting...' text with spinner in action dialog

+10 -3
+9 -3
src/components/organisms/grain-action-dialog.js
··· 5 5 static properties = { 6 6 open: { type: Boolean, reflect: true }, 7 7 actions: { type: Array }, 8 - loading: { type: Boolean } 8 + loading: { type: Boolean }, 9 + loadingText: { type: String } 9 10 }; 10 11 11 12 static styles = css` ··· 58 59 color: var(--color-text-secondary); 59 60 } 60 61 .loading { 61 - padding: 24px; 62 + padding: 14px 16px; 62 63 display: flex; 64 + align-items: center; 63 65 justify-content: center; 66 + gap: 8px; 67 + font-size: var(--font-size-sm); 68 + color: var(--color-text-secondary); 64 69 } 65 70 `; 66 71 ··· 69 74 this.open = false; 70 75 this.actions = []; 71 76 this.loading = false; 77 + this.loadingText = 'Loading...'; 72 78 } 73 79 74 80 #handleOverlayClick(e) { ··· 98 104 <div class="dialog"> 99 105 ${this.loading ? html` 100 106 <div class="loading"> 101 - <grain-spinner></grain-spinner> 107 + <grain-spinner size="16"></grain-spinner> ${this.loadingText} 102 108 </div> 103 109 ` : html` 104 110 ${this.actions.map(item => html`