feat: added sync indicator to footer

src/app/shared/components/footer/footer.component.html

@@ -1,4 +1,8 @@
 <ng-container *ngIf="!!repositoryService.repositorySetting?.name">
-    <commander-branch-ahead-behind (click)="sync()" [noColor]="true" [branch]="repositoryService.currentBranch" cds-layout="m-l:sm">
+    <commander-branch-ahead-behind *ngIf="!isSync; else spinner" (click)="sync()" [noColor]="true"
+        [branch]="repositoryService.currentBranch" cds-layout="m-l:sm">
     </commander-branch-ahead-behind>
+    <ng-template #spinner>
+        <cds-icon shape="sync" class="spinner spin" cds-layout="m-l:sm"> </cds-icon>
+    </ng-template>
 </ng-container>

src/app/shared/components/footer/footer.component.scss

@@ -2,3 +2,7 @@ commander-branch-ahead-behind {
     line-height: 25px;
     cursor: pointer;
 }
+
+.spinner {
+    margin-top: 4px;
+}

src/app/shared/components/footer/footer.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { RepositoryService } from '@routes/repository/repository.service';
+import { sleep } from '@shared/functions';
 
 @Component({
     selector: 'commandos-footer',
@@ -8,14 +9,19 @@ import { RepositoryService } from '@routes/repository/repository.service';
 })
 export class FooterComponent implements OnInit {
 
+    isSync = false;
+
     constructor(
         public repositoryService: RepositoryService
     ) { }
 
     ngOnInit(): void {
     }
 
-    sync() {
-        this.repositoryService.sync();
+    async sync() {
+        this.isSync = true;
+        await this.repositoryService.sync();
+        await sleep(2000);
+        this.isSync = false;
     }
 }