diff --git a/src/app/body/pipeline/pipeline.component.html b/src/app/body/pipeline/pipeline.component.html
index e8382b82..8fd08c35 100644
--- a/src/app/body/pipeline/pipeline.component.html
+++ b/src/app/body/pipeline/pipeline.component.html
@@ -12,59 +12,62 @@
 * See the MIT License for more details. 
 ***********************************************************/ -->
 
-  <div class="pl-4">
-      <div class="btn-group smallButton p-4">
-        <button class="btn px-4 dropdown-toggle m-2" type="button" id="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{startService.selectedTeamId}}&nbsp;&nbsp;</button>
-        <div class="dropdown-menu dropdown-menu-left" id="dropdownUserCard">
-            <ng-container *ngFor="let item of startService.teams">
-                <button class="dropdown-item" type="button" (click)="updateSelectedTeamId(item)">{{item}}</button>
-            </ng-container>
-        </div>
-      </div>
-  </div>
-  <div class="card">
-  <div class="card-body table-responsive-sm">
-    <table *ngIf="!gitlab" mat-table class="full-width-table" matSort aria-label="Elements" [dataSource]="workflows">
-      <ng-container matColumnDef="PipelineName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Pipeline Name</th>
-        <td mat-cell *matCellDef="let workflow">{{ workflow.head_commit.message }}</td>
-      </ng-container>
-      <ng-container matColumnDef="AuthorName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Author name</th>
-        <td mat-cell *matCellDef="let workflow">{{ workflow.head_commit.author.name }}</td>
-      </ng-container>
-      <ng-container matColumnDef="WorkflowID">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Workflow ID</th>
-        <td mat-cell *matCellDef="let workflow">{{ workflow.id }}</td>
-      </ng-container>
-      <ng-container matColumnDef="Status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
-        <td mat-cell *matCellDef="let workflow">{{ workflow.status }}</td>
-      </ng-container>
-      <tr mat-header-row *matHeaderRowDef="['PipelineName', 'AuthorName', 'WorkflowID', 'Status']; sticky: true"></tr>
-      <tr mat-row *matRowDef="let workflow; columns: ['PipelineName', 'AuthorName', 'WorkflowID', 'Status'];"></tr>
-    </table>
-    <table *ngIf="gitlab" mat-table class="full-width-table" matSort aria-label="Elements" [dataSource]="workflows2">
-      <ng-container matColumnDef="PipelineName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Pipeline Name</th>
-        <td mat-cell *matCellDef="let workflow">{{ workflow.name }}</td>
-      </ng-container>
-      <ng-container matColumnDef="WorkflowID">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Workflow ID</th>
-        <td mat-cell *matCellDef="let workflow">{{ workflow.id }}</td>
-      </ng-container>
-      <ng-container matColumnDef="Status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
-        <td mat-cell *matCellDef="let workflow">{{ workflow.status }}</td>
-      </ng-container>
-      <tr mat-header-row *matHeaderRowDef="['PipelineName', 'WorkflowID', 'Status']; sticky: true"></tr>
-      <tr mat-row *matRowDef="let workflow; columns: ['PipelineName','WorkflowID', 'Status'];"></tr>
-    </table>
-    <div *ngIf="showLoader" class="text-center">
-      <mat-spinner diameter="50"></mat-spinner>
-    </div>
-    <div *ngIf="noData" class="text-center">
-      <p>No data available</p>
+<div class="pl-4">
+  <div class="btn-group smallButton p-4">
+    <button class="btn px-4 dropdown-toggle m-2" type="button" id="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{startService.selectedTeamId}}&nbsp;&nbsp;</button>
+    <div class="dropdown-menu dropdown-menu-left" id="dropdownUserCard">
+        <ng-container *ngFor="let item of startService.teams">
+            <button class="dropdown-item" type="button" (click)="updateSelectedTeamId(item)">{{item}}</button>
+        </ng-container>
     </div>
   </div>
 </div>
+<div *ngIf="pipeLineDataReady" class="card">
+<div class="card-body table-responsive-sm">
+  <table *ngIf="!gitlab" mat-table class="full-width-table" matSort aria-label="Elements" [dataSource]="workflows">
+    <ng-container matColumnDef="PipelineName">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Pipeline Name</th>
+      <td mat-cell *matCellDef="let workflow">{{ workflow.head_commit.message }}</td>
+    </ng-container>
+    <ng-container matColumnDef="AuthorName">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Author name</th>
+      <td mat-cell *matCellDef="let workflow">{{ workflow.head_commit.author.name }}</td>
+    </ng-container>
+    <ng-container matColumnDef="WorkflowID">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Workflow ID</th>
+      <td mat-cell *matCellDef="let workflow">{{ workflow.id }}</td>
+    </ng-container>
+    <ng-container matColumnDef="Status">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
+      <td mat-cell *matCellDef="let workflow">{{ workflow.status }}</td>
+    </ng-container>
+    <tr mat-header-row *matHeaderRowDef="['PipelineName', 'AuthorName', 'WorkflowID', 'Status']; sticky: true"></tr>
+    <tr mat-row *matRowDef="let workflow; columns: ['PipelineName', 'AuthorName', 'WorkflowID', 'Status'];"></tr>
+  </table>
+  <table *ngIf="gitlab" mat-table class="full-width-table" matSort aria-label="Elements" [dataSource]="workflows2">
+    <ng-container matColumnDef="PipelineName">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Pipeline Name</th>
+      <td mat-cell *matCellDef="let workflow">{{ workflow.name }}</td>
+    </ng-container>
+    <ng-container matColumnDef="WorkflowID">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Workflow ID</th>
+      <td mat-cell *matCellDef="let workflow">{{ workflow.id }}</td>
+    </ng-container>
+    <ng-container matColumnDef="Status">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
+      <td mat-cell *matCellDef="let workflow">{{ workflow.status }}</td>
+    </ng-container>
+    <tr mat-header-row *matHeaderRowDef="['PipelineName', 'WorkflowID', 'Status']; sticky: true"></tr>
+    <tr mat-row *matRowDef="let workflow; columns: ['PipelineName','WorkflowID', 'Status'];"></tr>
+  </table>
+<div *ngIf="showLoader" class="text-center">
+  <mat-spinner diameter="50"></mat-spinner>
+</div>
+<div *ngIf="noData" class="text-center">
+  <p>No data available</p>
+</div>
+</div>
+</div>
+<ng-container *ngIf="showLoader">
+<app-loader></app-loader>
+</ng-container>
diff --git a/src/app/body/pipeline/pipeline.component.ts b/src/app/body/pipeline/pipeline.component.ts
index 53708bdc..6cdd9f05 100644
--- a/src/app/body/pipeline/pipeline.component.ts
+++ b/src/app/body/pipeline/pipeline.component.ts
@@ -31,6 +31,9 @@ export class PipelineComponent {
   provider: any;
   ProjectId:number;
   gitlab : boolean = false;
+  orgDomain: string;
+  teamName: string = "";
+  pipeLineDataReady: boolean;
 
   constructor(private functions: AngularFireFunctions,private http: HttpClient, private githubService: GithubServiceService,public teamService: TeamServiceService, public startService: StartServiceService, public errorHandlerService: ErrorHandlerService,public authService: AuthService, public backendService: BackendService, public applicationSettingsService: ApplicationSettingsService, public cookieService: CookieService, public navbarHandler: NavbarHandlerService, public gitlabService: GitlabServiceService) {}
 
@@ -44,18 +47,23 @@ export class PipelineComponent {
     this.backendService.getOrgDetails(this.appkey);
       this.teamIds = this.backendService.getOrganizationTeamIds();
       this.teamId = this.authService.getTeamId();
+      this.orgDomain = this.backendService.getOrganizationDomain();
+      this.pipeLineDataReady = false;
+      this.getWorkflows();
     } else {
       this.startService.userDataStateObservable.subscribe((data) => {
         if (data) {
           this.appkey = this.authService.getAppKey();
           this.backendService.getOrgDetails(this.appkey).subscribe(()=>{
           this.teamIds = this.backendService.getOrganizationTeamIds();
-          });
           this.teamId = this.authService.getTeamId();
+          this.orgDomain = this.backendService.getOrganizationDomain();
+          this.pipeLineDataReady = false;
+          this.getWorkflows();
+          });
         }
       });
     }
-    this.getWorkflows();
   }
 
   updateSelectedTeamId(teamId: string) {
@@ -83,10 +91,11 @@ export class PipelineComponent {
 
 
   getWorkflows() {
-    const orgDomain = this.backendService.getOrganizationDomain();
-    const teamName = this.startService.teamName;
+    this.showLoader = true;
+    this.orgDomain = this.backendService.getOrganizationDomain();
+    this.teamName = this.startService.teamName;
     const callable = this.functions.httpsCallable('teams/getGitDetails');
-    callable({OrganizationDomain: orgDomain, TeamName: teamName}).subscribe({
+    callable({OrganizationDomain: this.orgDomain, TeamName: this.teamName}).subscribe({
       next: (data) => {
         console.log(data[0]);
         this.projectLink = data[0]['ProjectLink'];
@@ -139,6 +148,8 @@ export class PipelineComponent {
       },
       complete: () => {
         console.info('Getting Label Data Successful');
+        this.pipeLineDataReady = true;
+        this.showLoader = false;
       }
     });
   }