Improve usability by eliminating page reloads

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

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