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,70 +46,86 @@
     <div class="col">
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
-          <div class="d-flex my-3">
+          @if (isLoading) {
-            <div class="w-50" i18n>User Signup</div>
+            <ngx-skeleton-loader
-            <div class="w-50">
+              animation="pulse"
-              <mat-slide-toggle
+              class="my-3"
-                color="primary"
+              [theme]="{
-                hideIcon="true"
+                height: '1.5rem',
-                [checked]="isUserSignupEnabled"
+                width: '100%'
-                (change)="onEnableUserSignupModeChange($event)"
+              }"
-              />
+            />
-            </div>
+          } @else {
-          </div>
-          @if (hasPermissionToToggleReadOnlyMode) {
             <div class="d-flex my-3">
-              <div class="w-50" i18n>Read-only Mode</div>
+              <div class="w-50" i18n>User Signup</div>
               <div class="w-50">
                 <mat-slide-toggle
                   color="primary"
                   hideIcon="true"
-                  [checked]="isReadOnlyMode"
+                  [checked]="isUserSignupEnabled"
-                  (change)="onReadOnlyModeChange($event)"
+                  (change)="onEnableUserSignupModeChange($event)"
                 />
               </div>
             </div>
-          }
+            @if (hasPermissionToToggleReadOnlyMode) {
-          <div class="d-flex my-3">
+              <div class="d-flex my-3">
-            <div class="w-50" i18n>Data Gathering</div>
+                <div class="w-50" i18n>Read-only Mode</div>
-            <div class="w-50">
+                <div class="w-50">
-              <mat-slide-toggle
+                  <mat-slide-toggle
-                color="primary"
+                    color="primary"
-                hideIcon="true"
+                    hideIcon="true"
-                [checked]="isDataGatheringEnabled"
+                    [checked]="isReadOnlyMode"
-                (change)="onEnableDataGatheringChange($event)"
+                    (change)="onReadOnlyModeChange($event)"
-              />
+                  />
-            </div>
+                </div>
-          </div>
+              </div>
-          @if (hasPermissionForSystemMessage) {
+            }
             <div class="d-flex my-3">
-              <div class="w-50" i18n>System Message</div>
+              <div class="w-50" i18n>Data Gathering</div>
               <div class="w-50">
-                @if (systemMessage) {
+                <mat-slide-toggle
-                  <div class="align-items-center d-flex">
+                  color="primary"
-                    <div class="text-truncate">{{ systemMessage | json }}</div>
+                  hideIcon="true"
+                  [checked]="isDataGatheringEnabled"
+                  (change)="onEnableDataGatheringChange($event)"
+                />
+              </div>
+            </div>
+            @if (hasPermissionForSystemMessage) {
+              <div class="d-flex my-3">
+                <div class="w-50" i18n>System Message</div>
+                <div class="w-50">
+                  @if (systemMessage) {
+                    <div class="align-items-center d-flex">
+                      <div class="text-truncate">
+                        {{ systemMessage | json }}
+                      </div>
+                      <button
+                        class="h-100 mx-1 no-min-width px-2"
+                        mat-button
+                        (click)="onDeleteSystemMessage()"
+                      >
+                        <ion-icon name="trash-outline" />
+                      </button>
+                    </div>
+                  }
+                  @if (!systemMessage) {
                     <button
-                      class="h-100 mx-1 no-min-width px-2"
+                      class="mt-2"
-                      mat-button
+                      color="accent"
-                      (click)="onDeleteSystemMessage()"
+                      mat-flat-button
+                      (click)="onSetSystemMessage()"
                     >
-                      <ion-icon name="trash-outline" />
+                      <ion-icon
+                        class="mr-1"
+                        name="information-circle-outline"
+                      />
+                      <span i18n>Set Message</span>
                     </button>
-                  </div>
+                  }
-                }
+                </div>
-                @if (!systemMessage) {
-                  <button
-                    class="mt-2"
-                    color="accent"
-                    mat-flat-button
-                    (click)="onSetSystemMessage()"
-                  >
-                    <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>

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(() => {