Show spinner if loading page

core/language/us.json

@@ -459,7 +459,7 @@
 	"rewardsharepage": {
 		"rchange1": "Rewardshares",
 		"rchange2": "Create reward share",
-		"rchange3": "Rewardshares Involving In This Account",
+		"rchange3": "Rewardshares Involving This Account",
 		"rchange4": "Minting Account",
 		"rchange5": "Share Percent",
 		"rchange6": "Recipient",

plugins/plugins/core/name-registration/name-registration.src.js

@@ -29,7 +29,6 @@ class NameRegistration extends LitElement {
         return {
             theme: { type: String, reflect: true },
             qortWalletBalance: { type: Number },
-            loading: { type: Boolean },
             names: { type: Array },
             marketSellNames: { type: Array },
             recipientPublicKey: { type: String },
@@ -131,6 +130,23 @@ class NameRegistration extends LitElement {
                 text-align: right;
             }
 
+            paper-spinner-lite {
+                height: 30px;
+                width: 30px;
+                --paper-spinner-color: var(--mdc-theme-primary);
+                --paper-spinner-stroke-width: 3px;
+            }
+
+            .spinner {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                position: fixed;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
             #pages {
                 display: flex;
                 flex-wrap: wrap;
@@ -276,9 +292,14 @@ class NameRegistration extends LitElement {
                             }
                         }}></vaadin-grid-column>
                     </vaadin-grid>
-                    ${this.isEmptyArray(this.names) ? html`
+                    ${(this.isEmptyArray(this.names) && !this.isLoading) ? html`
                         <span style="color: var(--black);">${translate("registernamepage.nchange8")}</span>
                     `: ''}
+                    ${this.isLoading ? html`
+                        <div class="spinner">
+                            <paper-spinner-lite active></paper-spinner-lite>
+                        </div>
+                    ` : ''}
                 </div>
 
                 <mwc-dialog id="registerNameDialog" scrimClickAction="${this.registerNameLoading ? '' : 'close'}">
@@ -545,10 +566,12 @@ class NameRegistration extends LitElement {
         this.unitCancelSellFee()
 
         const fetchNames = () => {
+            this.isLoading = true
             parentEpml.request('apiCall', {
                 url: `/names/address/${this.selectedAddress.address}?limit=0&reverse=true`
             }).then(res => {
                 setTimeout(() => { this.names = res }, 1)
+                this.isLoading = false
             })
             setTimeout(fetchNames, this.config.user.nodeSettings.pingInterval)
         }

plugins/plugins/core/names-market/names-market.src.js

@@ -30,7 +30,6 @@ class NamesMarket extends LitElement {
         return {
             theme: { type: String, reflect: true },
             qortWalletBalance: { type: Number },
-            loading: { type: Boolean },
             marketSellNames: { type: Array },
             marketSoldNames: { type: Array },
             filteredItems: { type: Array },
@@ -165,6 +164,23 @@ class NamesMarket extends LitElement {
                 text-align: right;
             }
 
+            paper-spinner-lite {
+                height: 30px;
+                width: 30px;
+                --paper-spinner-color: var(--mdc-theme-primary);
+                --paper-spinner-stroke-width: 3px;
+            }
+
+            .spinner {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                position: fixed;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
+
             #pages {
                 display: flex;
                 flex-wrap: wrap;
@@ -362,9 +378,14 @@ class NamesMarket extends LitElement {
                                 }}></vaadin-grid-column>
                             </vaadin-grid>
                             <div id="pages"></div>
-                            ${this.isEmptyArray(this.marketSellNames) ? html`
+                            ${(this.isEmptyArray(this.marketSellNames) && !this.isLoading) ? html`
                                 <span style="color: var(--black);">${translate("registernamepage.nchange24")}</span>
                             `: ''}
+                            ${this.isLoading ? html`
+                                <div class="spinner">
+                                    <paper-spinner-lite active></paper-spinner-lite>
+                                </div>
+                            ` : ''}
                         </div>
                     </div>
                     <div id="tab-sold-content">
@@ -383,9 +404,14 @@ class NamesMarket extends LitElement {
                                 }}></vaadin-grid-column>
                             </vaadin-grid>
                             <div id="pagesSold"></div>
-                            ${this.isEmptyArray(this.marketSoldNames) ? html`
+                            ${(this.isEmptyArray(this.marketSoldNames) && !this.isLoading) ? html`
                                 <span style="color: var(--black);">${translate("registernamepage.nchange24")}</span>
                             `: ''}
+                            ${this.isLoading ? html`
+                                <div class="spinner">
+                                    <paper-spinner-lite active></paper-spinner-lite>
+                                </div>
+                            ` : ''}
                         </div>
                     </div>
                 </div>
@@ -548,22 +574,26 @@ class NamesMarket extends LitElement {
         }, 0)
 
         const fetchMarketSellNames = async () => {
+            this.isLoading = true
             await parentEpml.request('apiCall', {
                 url: `/names/forsale?limit=0&reverse=true`
             }).then(res => {
                 this.marketSellNames = res
             })
             this.updatePageSize()
+            this.isLoading = false
             setTimeout(fetchMarketSellNames, 180000)
         }
 
         const fetchMarketSoldNames = async () => {
+            this.isLoading = true
             await parentEpml.request('apiCall', {
                 url: `/transactions/search?txType=BUY_NAME&confirmationStatus=BOTH&limit=0&reverse=true`
             }).then(res => {
                 this.marketSoldNames = res
             })
             this.updatePageSoldSize()
+            this.isLoading = false
             setTimeout(fetchMarketSoldNames, 300000)
         }
 

plugins/plugins/core/puzzles/puzzles.src.js

@@ -87,6 +87,23 @@ class Puzzles extends LitElement {
 			box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
 			margin-bottom: 2em;
 		}
+
+        paper-spinner-lite {
+            height: 30px;
+            width: 30px;
+            --paper-spinner-color: var(--mdc-theme-primary);
+            --paper-spinner-stroke-width: 3px;
+        }
+
+        .spinner {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
 	`
     }
 
@@ -132,6 +149,11 @@ class Puzzles extends LitElement {
                         			}
                     			}}></vaadin-grid-column>
 				    </vaadin-grid>
+                    ${this.loading ? html`
+                        <div class="spinner">
+                            <paper-spinner-lite active></paper-spinner-lite>
+                        </div>
+                    ` : ''}
 
 				    <mwc-dialog id="puzzleGuessDialog" scrimClickAction="${this.loading ? '' : 'close'}">
 					<div>${translate("puzzlepage.pchange9")} ${this.selectedPuzzle.reward} QORT:</div>
@@ -252,6 +274,7 @@ class Puzzles extends LitElement {
         }
 
         const updatePuzzles = async () => {
+            this.loading = true;
             let _puzzleGroupMembers = await getPuzzleGroupMembers()
 
             let _puzzles = []
@@ -305,6 +328,7 @@ class Puzzles extends LitElement {
                 }))
 
             this.puzzles = _puzzles;
+            this.loading = false;
 
             setTimeout(updatePuzzles, 60000)
         }

plugins/plugins/core/reward-share/reward-share.src.js

@@ -20,7 +20,7 @@ const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
 class RewardShare extends LitElement {
     static get properties() {
         return {
-            loading: { type: Boolean },
+            isLoading: { type: Boolean },
             rewardShares: { type: Array },
             recipientPublicKey: { type: String },
             selectedAddress: { type: Object },
@@ -80,6 +80,23 @@ class RewardShare extends LitElement {
             .red {
                 --mdc-theme-primary: #F44336;
             }
+
+            paper-spinner-lite {
+                height: 30px;
+                width: 30px;
+                --paper-spinner-color: var(--mdc-theme-primary);
+                --paper-spinner-stroke-width: 3px;
+            }
+
+            .spinner {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                position: fixed;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+            }
         `
     }
 
@@ -92,6 +109,7 @@ class RewardShare extends LitElement {
         this.btnDisable = false
         this.createRewardShareLoading = false
         this.removeRewardShareLoading = false
+        this.isLoading = false
         this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'
     }
 
@@ -115,6 +133,14 @@ class RewardShare extends LitElement {
                         }}>
                         </vaadin-grid-column>
                     </vaadin-grid>
+                    ${(this.isEmptyArray(this.rewardShares) && !this.isLoading) ? html`
+                        <span style="color: var(--black);">${translate("rewardsharepage.rchange15")}</span>
+                    `: ''}
+                    ${this.isLoading ? html`
+                        <div class="spinner">
+                            <paper-spinner-lite active></paper-spinner-lite>
+                        </div>
+                    ` : ''}
                 </div>
 
                 <mwc-dialog id="createRewardShareDialog" scrimClickAction="${this.createRewardShareLoading ? '' : 'close'}">
@@ -202,9 +228,6 @@ class RewardShare extends LitElement {
                      ${translate("general.close")}
                     </mwc-button>
                 </mwc-dialog>
-                ${this.isEmptyArray(this.rewardShares) ? html`
-                    <span style="color: var(--black);">${translate("rewardsharepage.rchange15")}</span>
-                `: ''}
             </div>
         `
     }
@@ -236,11 +259,13 @@ class RewardShare extends LitElement {
         }
 
         const updateRewardshares = () => {
+            this.isLoading = true
             this.rewardShares = []
             parentEpml.request('apiCall', {
                 url: `/addresses/rewardshares?involving=${this.selectedAddress.address}`
             }).then(res => {
                 this.rewardShares = res
+                this.isLoading = false
             })
             setTimeout(updateRewardshares, 60000)
         }