Skip to content

Commit

Permalink
web/satellite: added loaders across all the UI. Removed most of the r…
Browse files Browse the repository at this point in the history 
…equests from initial load

Added loader spinners across all of the UI to be visible while data is being fetched.
Removed most of the requests from the initial load of the satellite dashboard.
Removed useless requests after creating of new projects.
This should make user's experience much more better since load time of the app is much lower than it was before.

Change-Id: Ib0941ad4eee6b3caf781d132062b55cb17703fe7
  • Loading branch information
@VitaliiShpital
VitaliiShpital committed Jun 10, 2021
1 parent c27da95 commit ed28fa3
Show file tree
Hide file tree
Showing 44 changed files with 763 additions and 671 deletions.
18 changes: 15 additions & 3 deletions web/satellite/src/components/accessGrants/AccessGrants.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,12 @@
width="203px"
height="44px"
:on-press="onCreateClick"
:is-disabled="areGrantsFetching"
/>
</div>
</div>
<div v-if="accessGrantsList.length" class="access-grants-items">
<VLoader v-if="areGrantsFetching" width="100px" height="100px" class="grants-loader"/>
<div v-if="accessGrantsList.length && !areGrantsFetching" class="access-grants-items">
<SortAccessGrantsHeader :on-header-click-callback="onHeaderSectionClickCallback"/>
<div class="access-grants-items__content">
<VList
Expand All @@ -40,7 +42,7 @@
:on-page-click-callback="onPageClick"
/>
</div>
<EmptyState v-else />
<EmptyState v-if="!accessGrantsList.length && !areGrantsFetching" />
<ConfirmDeletePopup
v-if="isDeleteClicked"
@close="onClearSelection"
Expand All @@ -59,6 +61,7 @@ import EmptyState from '@/components/accessGrants/EmptyState.vue';
import SortAccessGrantsHeader from '@/components/accessGrants/SortingHeader.vue';
import VButton from '@/components/common/VButton.vue';
import VList from '@/components/common/VList.vue';
import VLoader from '@/components/common/VLoader.vue';
import VPagination from '@/components/common/VPagination.vue';
import { RouteConfig } from '@/router';
Expand Down Expand Up @@ -88,6 +91,7 @@ declare interface ResetPagination {
VPagination,
VButton,
ConfirmDeletePopup,
VLoader,
},
})
export default class AccessGrants extends Vue {
Expand All @@ -98,6 +102,8 @@ export default class AccessGrants extends Vue {
*/
private isDeleteClicked: boolean = false;
public areGrantsFetching: boolean = true;
public $refs!: {
pagination: HTMLElement & ResetPagination;
};
Expand All @@ -107,7 +113,9 @@ export default class AccessGrants extends Vue {
*/
public async mounted(): Promise<void> {
try {
await this.$store.dispatch(FETCH, 1);
await this.$store.dispatch(FETCH, this.FIRST_PAGE);
this.areGrantsFetching = false;
} catch (error) {
await this.$notify.error(`Unable to fetch Access Grants. ${error.message}`);
}
Expand Down Expand Up @@ -262,4 +270,8 @@ export default class AccessGrants extends Vue {
}
}
}
.grants-loader {
margin-top: 50px;
}
</style>
12 changes: 9 additions & 3 deletions web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
</div>
<div class="permissions__content__right__buckets-select">
<p class="permissions__content__right__buckets-select__label">Buckets</p>
<BucketsSelection />
<VLoader v-if="areBucketNamesFetching" width="50px" height="50px"/>
<BucketsSelection v-else/>
</div>
<div class="permissions__content__right__bucket-bullets">
<div
Expand All @@ -53,11 +54,11 @@
width="100%"
height="48px"
:on-press="onContinueInBrowserClick"
:is-disabled="isLoading || !isAccessGrantsWebWorkerReady"
:is-disabled="isLoading || !isAccessGrantsWebWorkerReady || areBucketNamesFetching"
/>
<p
class="permissions__cli-link"
:class="{ disabled: !isAccessGrantsWebWorkerReady || isLoading }"
:class="{ disabled: !isAccessGrantsWebWorkerReady || isLoading || areBucketNamesFetching }"
@click.stop="onContinueInCLIClick"
>
Continue in CLI
Expand All @@ -72,6 +73,7 @@ import BucketNameBullet from '@/components/accessGrants/permissions/BucketNameBu
import BucketsSelection from '@/components/accessGrants/permissions/BucketsSelection.vue';
import DurationSelection from '@/components/accessGrants/permissions/DurationSelection.vue';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
import BackIcon from '@/../static/images/accessGrants/back.svg';
Expand All @@ -87,6 +89,7 @@ import { DurationPermission } from '@/types/accessGrants';
BucketNameBullet,
DurationSelection,
VButton,
VLoader,
},
})
export default class PermissionsStep extends Vue {
Expand All @@ -99,6 +102,7 @@ export default class PermissionsStep extends Vue {
public isUpload: boolean = true;
public isList: boolean = true;
public isDelete: boolean = true;
public areBucketNamesFetching: boolean = true;
/**
* Lifecycle hook after initial render.
Expand All @@ -124,6 +128,8 @@ export default class PermissionsStep extends Vue {
try {
await this.$store.dispatch(BUCKET_ACTIONS.FETCH_ALL_BUCKET_NAMES);
this.areBucketNamesFetching = false;
} catch (error) {
await this.$notify.error(`Unable to fetch all bucket names. ${error.message}`);
}
Expand Down
73 changes: 38 additions & 35 deletions web/satellite/src/components/account/billing/BillingArea.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

<template>
<div class="account-billing-area">
<InfoBar/>
<div class="account-billing-area__notification-container" v-if="hasNoCreditCard">
<div class="account-billing-area__notification-container__negative-balance" v-if="isBalanceNegative">
<NegativeBalanceIcon/>
Expand All @@ -21,16 +22,20 @@
<div class="account-billing-area__title-area" v-if="userHasOwnProject" :class="{ 'custom-position': hasNoCreditCard && (isBalanceLow || isBalanceNegative) }">
<div class="account-billing-area__title-area__balance-area">
<div class="account-billing-area__title-area__balance-area__free-credits">
<span class="account-billing-area__title-area__balance-area__free-credits__amount">
Free Credits: {{ balance.freeCredits | centsToDollars }}
</span>
<p class="account-billing-area__title-area__balance-area__free-credits__label">Free Credits:</p>
<VLoader v-if="isBalanceFetching" width="20px" height="20px"/>
<p v-else>{{ balance.freeCredits | centsToDollars }}</p>
</div>
<div @click.stop="toggleBalanceDropdown" class="account-billing-area__title-area__balance-area__tokens-area">
<span class="account-billing-area__title-area__balance-area__tokens-area__amount" :style="{ color: balanceColor }">
Available Balance: {{ balance.coins | centsToDollars }}
</span>
<HideIcon v-if="isBalanceDropdownShown"/>
<ExpandIcon v-else/>
<p class="account-billing-area__title-area__balance-area__tokens-area__label" :style="{ color: balanceColor }">
Available Balance:
</p>
<VLoader v-if="isBalanceFetching" width="20px" height="20px"/>
<p v-else>
{{ balance.coins | centsToDollars }}
</p>
<HideIcon v-if="isBalanceDropdownShown" class="icon"/>
<ExpandIcon v-else class="icon"/>
<HistoryDropdown
v-show="isBalanceDropdownShown"
@close="closeDropdown"
Expand All @@ -57,7 +62,9 @@ import SmallDepositHistory from '@/components/account/billing/depositAndBillingH
import EstimatedCostsAndCredits from '@/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue';
import CreditsHistory from '@/components/account/billing/freeCredits/CreditsHistory.vue';
import HistoryDropdown from '@/components/account/billing/HistoryDropdown.vue';
import InfoBar from '@/components/account/billing/InfoBar.vue';
import PaymentMethods from '@/components/account/billing/paymentMethods/PaymentMethods.vue';
import VLoader from '@/components/common/VLoader.vue';
import DatePickerIcon from '@/../static/images/account/billing/datePicker.svg';
import ExpandIcon from '@/../static/images/account/billing/expand.svg';
Expand All @@ -67,7 +74,6 @@ import NegativeBalanceIcon from '@/../static/images/account/billing/negativeBala
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AccountBalance } from '@/types/payments';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
Expand All @@ -84,29 +90,23 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
ExpandIcon,
HideIcon,
CreditsHistory,
InfoBar,
VLoader,
},
})
export default class BillingArea extends Vue {
public readonly creditHistoryRoute: string = RouteConfig.Account.with(RouteConfig.CreditsHistory).path;
public readonly balanceHistoryRoute: string = RouteConfig.Account.with(RouteConfig.DepositHistory).path;
public isBalanceFetching: boolean = true;
/**
* Mounted lifecycle hook before initial render.
* Fetches billing history and project limits.
* Mounted lifecycle hook after initial render.
* Fetches account balance.
*/
public async beforeMount(): Promise<void> {
public async mounted(): Promise<void> {
try {
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PAYMENTS_HISTORY);
if (this.$store.getters.canUserCreateFirstProject && !this.userHasOwnProject) {
await this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CREATE_PROJECT_BUTTON);
}
} catch (error) {
await this.$notify.error(error.message);
}
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BALANCE);
try {
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, this.$store.getters.selectedProject.id);
this.isBalanceFetching = false;
} catch (error) {
await this.$notify.error(error.message);
}
Expand Down Expand Up @@ -203,7 +203,6 @@ export default class BillingArea extends Vue {
</script>

<style scoped lang="scss">
.label-header {
display: none;
}
Expand Down Expand Up @@ -239,9 +238,8 @@ export default class BillingArea extends Vue {
font-weight: bold;
font-size: 16px;
line-height: 148.31%;
margin: 30px 0;
margin: 30px 0 10px 0;
display: inline-block;
margin-bottom: 10px;
}
&__input-wrapper {
Expand Down Expand Up @@ -290,7 +288,7 @@ export default class BillingArea extends Vue {
display: flex;
align-items: center;
justify-content: space-between;
margin: 60px 0 20px 0;
margin: 20px 0;
&__balance-area {
display: flex;
Expand All @@ -303,13 +301,13 @@ export default class BillingArea extends Vue {
align-items: center;
position: relative;
cursor: pointer;
margin-right: 50px;
color: #768394;
font-size: 16px;
line-height: 19px;
&__amount {
&__label {
margin-right: 10px;
font-size: 16px;
line-height: 19px;
white-space: nowrap;
}
}
Expand All @@ -320,11 +318,12 @@ export default class BillingArea extends Vue {
cursor: default;
margin-right: 50px;
color: #768394;
font-size: 16px;
line-height: 19px;
&__amount {
&__label {
margin-right: 10px;
font-size: 16px;
line-height: 19px;
white-space: nowrap;
}
}
}
Expand All @@ -340,7 +339,6 @@ export default class BillingArea extends Vue {
justify-content: flex-start;
padding: 20px 20px 20px 20px;
border-radius: 12px;
margin-bottom: 32px;
&__text {
font-family: 'font_medium', sans-serif;
Expand All @@ -364,4 +362,9 @@ export default class BillingArea extends Vue {
.custom-position {
margin: 30px 0 20px 0;
}
.icon {
min-width: 14px;
margin-left: 10px;
}
</style>
Loading

0 comments on commit ed28fa3

Please sign in to comment.