simplify data syncing indication animation

package.json

@@ -1,7 +1,7 @@
 {
   "name": "email-securely-app",
   "description": "Unofficial desktop app for E2E encrypted email providers",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "author": "Vladimir Yakovlev <[email protected]>",
   "license": "MIT",
   "homepage": "https://github.com/vladimiry/email-securely-app",

src/web/src/app/_accounts/account-title.component.html

@@ -20,7 +20,6 @@
                 'fa-plug': !state.account.databaseView && !state.account.progress.togglingDatabaseView,
                 'fa-spinner fa-pulse fa-fw': state.account.progress.togglingDatabaseView
             }"
-            [@fade]="state.fade" (@fade.done)="onFadeCycleDone()"
         ></i>
     </button>
 </div>

src/web/src/app/_accounts/account-title.component.scss

@@ -64,6 +64,7 @@
 
             &.syncing {
                 color: theme-color("primary");
+                animation: app-keyframes-opacity 1s linear infinite;
             }
         }
     }

src/web/src/app/_accounts/account-title.component.ts

@@ -1,34 +1,23 @@
 import {ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit} from "@angular/core";
 import {ReplaySubject, Subscription, of} from "rxjs";
 import {Store, select} from "@ngrx/store";
-import {animate, state, style, transition, trigger} from "@angular/animations";
 import {distinctUntilChanged, filter, take, withLatestFrom} from "rxjs/operators";
 
 import {ACCOUNTS_ACTIONS} from "src/web/src/app/store/actions";
 import {AccountsSelectors} from "src/web/src/app/store/selectors";
 import {State} from "src/web/src/app/store/reducers/accounts";
 import {WebAccount} from "src/web/src/app/model";
 
-export const FADE_ANIMATION = trigger("fade", [
-    state("on", style({opacity: 0})),
-    state("off", style({opacity: 1})),
-    transition("* <=> *", [
-        animate(1000),
-    ]),
-]);
-
 interface ComponentState {
     account: WebAccount;
     selected: boolean;
     stored: boolean;
-    fade: "on" | "off";
 }
 
 @Component({
     selector: "email-securely-app-account-title",
     templateUrl: "./account-title.component.html",
     styleUrls: ["./account-title.component.scss"],
-    animations: [FADE_ANIMATION],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AccountTitleComponent implements OnInit, OnDestroy {
@@ -53,7 +42,6 @@ export class AccountTitleComponent implements OnInit, OnDestroy {
     set account(account: WebAccount) {
         this.patchState({
             account,
-            fade: account.progress.syncing ? "on" : "off",
             stored: account.accountConfig.database,
         });
     }
@@ -84,17 +72,6 @@ export class AccountTitleComponent implements OnInit, OnDestroy {
         });
     }
 
-    onFadeCycleDone() {
-        this.stateSubject$.pipe(take(1)).subscribe((value) => {
-            const fade = !value.account.progress.syncing
-                ? "off"
-                : value.fade === "on" ? "off" : "on";
-            if (value.fade !== fade) {
-                this.patchState({fade});
-            }
-        });
-    }
-
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
@@ -106,7 +83,6 @@ export class AccountTitleComponent implements OnInit, OnDestroy {
                 // account: null as any,
                 selected: false,
                 stored: false,
-                fade: "off",
             } as ComponentState);
 
         this.stateInitiaized = true;

src/web/src/index.scss

@@ -5,6 +5,7 @@ body {
     height: 100%;
 }
 
+// "bootstrap"
 .form-group.required > label::after {
     content: "*";
     color: theme-color("danger");

src/web/src/variables.scss

@@ -25,3 +25,9 @@ $app-font-size-base-small: $font-size-base * 0.75;
     padding-left: $btn-padding-x * 1.1;
     padding-right: $btn-padding-x * 1.1;
 }
+
+@keyframes app-keyframes-opacity {
+    50% {
+        opacity: 0;
+    }
+}