Improve usability by eliminating page reloads

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -243,7 +243,7 @@ export class GfAdminMarketDataComponent implements AfterViewInit, OnInit {
       .subscribe((filters) => {
         this.activeFilters = filters;
 
-        this.loadData();
+        this.reloadData({ pageIndex: 0 });
       });
 
     addIcons({
@@ -293,7 +293,7 @@ export class GfAdminMarketDataComponent implements AfterViewInit, OnInit {
       .deleteAssetProfile({ dataSource, symbol })
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
-        this.loadData();
+        this.reloadData();
       });
   }
 
@@ -306,7 +306,7 @@ export class GfAdminMarketDataComponent implements AfterViewInit, OnInit {
       )
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
-        this.loadData();
+        this.reloadData();
       });
   }
 
@@ -453,11 +453,7 @@ export class GfAdminMarketDataComponent implements AfterViewInit, OnInit {
             if (newAssetProfileIdentifier) {
               this.onOpenAssetProfileDialog(newAssetProfileIdentifier);
             } else {
-              this.loadData({
+              this.reloadData();
-                pageIndex: this.paginator().pageIndex,
-                sortColumn: this.sort().active,
-                sortDirection: this.sort().direction
-              });
 
               this.router.navigate(['.'], { relativeTo: this.route });
             }
@@ -511,4 +507,14 @@ export class GfAdminMarketDataComponent implements AfterViewInit, OnInit {
           });
       });
   }
+
+  private reloadData({
+    pageIndex = this.paginator().pageIndex
+  }: { pageIndex?: number } = {}) {
+    this.loadData({
+      pageIndex,
+      sortColumn: this.sort().active,
+      sortDirection: this.sort().direction
+    });
+  }
 }

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -64,7 +64,7 @@ import {
 } from 'ionicons/icons';
 import ms, { StringValue } from 'ms';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { switchMap } from 'rxjs';
+import { catchError, of, switchMap } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -390,6 +390,10 @@ export class GfAdminOverviewComponent implements OnInit {
         switchMap(() => {
           return this.userService.get(true);
         }),
+        catchError(() => {
+          // Refresh anyway to reflect the actual state of the settings
+          return of(undefined);
+        }),
         takeUntilDestroyed(this.destroyRef)
       )
       .subscribe(() => {

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -46,6 +46,16 @@
     <div class="col">
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
+          @if (isLoading) {
+            <ngx-skeleton-loader
+              animation="pulse"
+              class="my-3"
+              [theme]="{
+                height: '1.5rem',
+                width: '100%'
+              }"
+            />
+          } @else {
             <div class="d-flex my-3">
               <div class="w-50" i18n>User Signup</div>
               <div class="w-50">
@@ -87,7 +97,9 @@
                 <div class="w-50">
                   @if (systemMessage) {
                     <div class="align-items-center d-flex">
-                    <div class="text-truncate">{{ systemMessage | json }}</div>
+                      <div class="text-truncate">
+                        {{ systemMessage | json }}
+                      </div>
                       <button
                         class="h-100 mx-1 no-min-width px-2"
                         mat-button
@@ -104,13 +116,17 @@
                       mat-flat-button
                       (click)="onSetSystemMessage()"
                     >
-                    <ion-icon class="mr-1" name="information-circle-outline" />
+                      <ion-icon
+                        class="mr-1"
+                        name="information-circle-outline"
+                      />
                       <span i18n>Set Message</span>
                     </button>
                   }
                 </div>
               </div>
             }
+          }
           <div class="d-flex my-3">
             <div class="w-50" i18n>Housekeeping</div>
             <div class="w-50">

apps/client/src/app/components/user-account-membership/user-account-membership.component.ts

@@ -173,6 +173,9 @@ export class GfUserAccountMembershipComponent {
           this.dataService
             .redeemCoupon(couponCode)
             .pipe(
+              switchMap(() => {
+                return this.userService.get(true);
+              }),
               catchError(() => {
                 this.snackBar.open(
                   '😞 ' + $localize`Could not redeem coupon code`,
@@ -184,9 +187,6 @@ export class GfUserAccountMembershipComponent {
 
                 return EMPTY;
               }),
-              switchMap(() => {
-                return this.userService.get(true);
-              }),
               takeUntilDestroyed(this.destroyRef)
             )
             .subscribe(() => {