ui: fix distinctUntilChanged()

ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html

@@ -103,13 +103,18 @@
             <p><a (click)="copyTor()">{{ vars.torAddress }} <ion-icon name="copy-outline" class="tiny-icon"></ion-icon></a></p>
           </ion-label>
         </ion-item>
-        <ion-item *ngIf="vars.ui" lines="none">
+        <ion-item *ngIf="vars.lanAddress" lines="none">
           <ion-label class="ion-text-wrap">
             <h2>LAN Address</h2>
-            <p><a (click)="copyLan()">{{ vars.lanAddress }} <ion-icon name="copy-outline" class="tiny-icon"></ion-icon></a></p>
+            <p>
+              <a (click)="copyLan()">{{ vars.lanAddress }} <ion-icon name="copy-outline" class="tiny-icon"></ion-icon></a>
+            </p>
+            <p *ngIf="vars.testingLanConnection" style="display: flex; align-items: center; font-size: x-small">
+              <ion-text color="dark">Testing Connection</ion-text>
+              <ion-spinner style="height: 15px; margin-left: 5px;" name="dots" color="dark"></ion-spinner>
+            </p>
           </ion-label>
-          <ion-toggle *ngIf="!vars.testingLanConnection" (ionChange)="$lanToggled$.next($event)" [checked]="vars.lanEnabled" slot="end" fill="clear" class="lan-toggle" [disabled]="vars.status !== 'RUNNING'"></ion-toggle>
-          <ion-spinner slot="end" *ngIf="vars.testingLanConnection" name="lines" color="medium"></ion-spinner>
+          <ion-toggle (ionChange)="$lanToggled$.next($event)" [checked]="vars.lanEnabled" slot="end" class="lan-toggle" [disabled]="vars.status !== 'RUNNING' || vars.testingLanConnection"></ion-toggle>          
         </ion-item>
 
         <ion-item-divider>Backups</ion-item-divider>

ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.scss

@@ -65,5 +65,4 @@
   height: 1em;
   --handle-width: 0.9em;
   --handle-height: 0.9em;
-  margin-right: 10px;
 }

ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts

@@ -6,7 +6,7 @@ import { copyToClipboard } from 'src/app/util/web.util'
 import { AppModel, AppStatus } from 'src/app/models/app-model'
 import { AppInstalledFull } from 'src/app/models/app-types'
 import { ModelPreload } from 'src/app/models/model-preload'
-import { chill, modulateTime, pauseFor } from 'src/app/util/misc.util'
+import { chill, modulateTime, pauseFor, traceWheel } from 'src/app/util/misc.util'
 import { PropertySubject, peekProperties } from 'src/app/util/property-subject.util'
 import { AppBackupPage } from 'src/app/modals/app-backup/app-backup.page'
 import { LoaderService, markAsLoadingDuring$, markAsLoadingDuringP } from 'src/app/services/loader.service'
@@ -83,6 +83,8 @@ export class AppInstalledShowPage extends Cleanup {
               combineLatest([app.lanEnabled, this.$lanConnected$, app.status, this.$testingLanConnection$]).pipe(
                 filter(([_, __, s, alreadyConnecting]) => s === AppStatus.RUNNING && !alreadyConnecting),
                 concatMap(([enabled, connected]) => {
+                  // console.log('enabled', enabled)
+                  // console.log('connected', connected)
                   if (enabled && !connected) return markAsLoadingDuring$(this.$testingLanConnection$, this.testLanConnection())
                   if (!enabled && connected) return of(this.$lanConnected$.next(false))
                   return of()
@@ -90,19 +92,23 @@ export class AppInstalledShowPage extends Cleanup {
               ),
               // toggle lan
               combineLatest([this.$lanToggled$, app.lanEnabled, this.$testingLanConnection$]).pipe(
-                distinctUntilChanged(([toggled1], [toggled2]) => toggled1 !== toggled2),
                 filter(([_, __, alreadyLoading]) => !alreadyLoading),
                 map(([e, _]) => [(e as any).detail.checked, _]),
+                distinctUntilChanged(([toggled1], [toggled2]) => toggled1 === toggled2),
                 // if the app is already in the desired state, we bail
                 // this can happen because ionChange triggers when the [checked] value changes
                 filter(([uiEnabled, appEnabled]) => (uiEnabled && !appEnabled) || (!uiEnabled && appEnabled)),
-                map(([enabled]) => enabled
-                  ? this.enableLan().pipe(concatMap(() => this.testLanConnection()))
-                  : this.disableLan(),
-                ),
-                concatMap(o => markAsLoadingDuring$(this.$testingLanConnection$, o).pipe(
-                  catchError(e => this.setError(e)),
-                )),
+                concatMap( ([enabled]) => {
+                  let o: Observable<void>
+                  if (enabled) {
+                    o = this.enableLan().pipe(concatMap(() => this.testLanConnection()))
+                  } else {
+                    o = this.disableLan()
+                  }
+                  return markAsLoadingDuring$(this.$testingLanConnection$, o).pipe(
+                    catchError(e => this.setError(e)),
+                  )
+                }),
               ),
             ),
           ), //must be final in stack
@@ -119,6 +125,7 @@ export class AppInstalledShowPage extends Cleanup {
       retryWhen(errors => errors.pipe(delay(2500), take(20))),
       catchError(() => of(false)),
       take(1),
+      traceWheel('lan connected test'),
       map(connected => this.$lanConnected$.next(connected)),
     )
   }

ui/src/app/services/api/mock-api.service.ts

@@ -45,8 +45,8 @@ export class MockApiService extends ApiService {
   async testConnection (): Promise<true> {
     console.log('testing connection')
     this.testCounter ++
-    await pauseFor(1000)
-    if (this.testCounter > 5) {
+    await pauseFor(10000000)
+    if (this.testCounter > 3) {
       return true
     } else {
       throw new Error('Not Connected')

ui/use-mocks.json

@@ -1,5 +1,5 @@
 {
-  "useMocks": false,
+  "useMocks": true,
   "mockOver": "lan",
-  "skipStartupAlerts": false
+  "skipStartupAlerts": true
 }