mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 09:45:52 +00:00
Merge pull request #257 from QuickMythril/loading-spinner
Show spinner if loading page
This commit is contained in:
AlphaX-Projects
GitHub
commit
c080682860
@ -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",
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user