fix all loaders in project page

web/ui/dashboard/src/app/private/components/create-project-component/create-project-component.component.ts

@@ -66,12 +66,14 @@ export class CreateProjectComponent implements OnInit {
 		this.isCreatingProject = true;
 		const [digits, word] = this.projectForm.value.config.strategy.duration.match(/\D+|\d+/g);
 		word === 's' ? (this.projectForm.value.config.strategy.duration = parseInt(digits) * 1000) : (this.projectForm.value.config.strategy.duration = parseInt(digits) * 1000000);
+
 		try {
 			const response = await this.createProjectService.createProject(this.projectForm.value);
 			const projectId = response?.data?.uid;
 			this.privateService.activeProjectId = projectId;
 			this.isCreatingProject = false;
 			this.generalService.showNotification({ message: 'Project created successfully!', style: 'success' });
+			this.onAction.emit({ action: 'createProject', data: response.data });
 		} catch (error) {
 			this.isCreatingProject = false;
 		}

web/ui/dashboard/src/app/private/components/loader/loader.component.ts

@@ -7,6 +7,7 @@ import { Component, Input, OnInit } from '@angular/core';
 })
 export class LoaderComponent implements OnInit {
 	@Input() isTransparent: boolean = false;
+
 	constructor() {}
 
 	ngOnInit(): void {}

web/ui/dashboard/src/app/private/components/table-loader/table-loader.component.ts

@@ -7,6 +7,7 @@ import { Component, Input, OnInit } from '@angular/core';
 })
 export class TableLoaderComponent implements OnInit {
 	@Input() tableHead!: string[];
+
 	constructor() {}
 
 	ngOnInit(): void {}

web/ui/dashboard/src/app/private/pages/project/apps/apps.component.html

@@ -99,21 +99,15 @@ <h1 class="font__12px font__weight-500 flex flex__align-items-center text__upper
 							</td>
 							<td>
 								<div>
-									<button
-										title="view events"
-										(click)="loadEventsFromAppsTable(app.uid)"
-										[disabled]="app.events <= 0"
-										[class]="'button__retry button--has-icon icon-left'"
-										(click)="showAppDetails = false"
-									>
+									<button title="view events" (click)="loadEventsFromAppsTable($event, app.uid)" [disabled]="app.events <= 0" [class]="'button__retry button--has-icon icon-left'">
 										<img src="/assets/img/view-events-icon.svg" alt="view events icon" />
 										View Events
 									</button>
 								</div>
 							</td>
 							<td>
 								<div class="dropdown">
-									<button class="button__clear button--has-icon" (click)="currentAppId = app.uid; showOverlay = true; showAppDetails = false">
+									<button class="button__clear button--has-icon" (click)="$event.stopPropagation(); currentAppId = app.uid; showOverlay = true; showAppDetails = false">
 										<img src="/assets/img/more-icon-vertical.svg" alt="more icon" />
 									</button>
 									<div [ngClass]="{ show: currentAppId == app.uid }" class="dropdown__menu dropdown__menu__nav small z-index--3">
@@ -130,6 +124,7 @@ <h1 class="font__12px font__weight-500 flex flex__align-items-center text__upper
 			</table>
 		</div>
 	</div>
+
 	<div class="flex flex__column flex__justify-center flex__align-items-center table--container" id="events-empty-state" *ngIf="displayedApps?.length === 0">
 		<img src="/assets/img/empty-state.svg" alt="empty state" class="empty-state-img" />
 		<p class="font__14px font__weight-600 margin-top__0px color__black width__20 text--center">No app to show here</p>

web/ui/dashboard/src/app/private/pages/project/apps/apps.component.ts

@@ -53,11 +53,8 @@ export class AppsComponent implements OnInit {
 		this.selectedAppStatus = status;
 	}
 
-	openUpdateAppModal(app: APP) {
-		this.currentAppId = '';
-	}
-
-	loadEventsFromAppsTable(appId: string) {
+	loadEventsFromAppsTable(event: any, appId: string) {
+		event.stopPropagation();
 		const projectId = this.privateService.activeProjectId;
 		this.router.navigate(['/projects/' + projectId + '/events'], { queryParams: { eventsApp: appId } });
 	}
@@ -76,8 +73,6 @@ export class AppsComponent implements OnInit {
 
 			if (!this.filteredApps) this.filteredApps = appsResponse.data.content;
 
-			// if (this.updateAppDetail) this.appsDetailsItem = this.apps.content.find(item => this.appsDetailsItem?.uid == item.uid);
-
 			this.isloadingApps = false;
 			return appsResponse;
 		} catch (error: any) {

web/ui/dashboard/src/app/private/pages/project/events/event-deliveries/event-deliveries.component.html

@@ -111,6 +111,8 @@
 	</div>
 
 	<div class="event__table">
+		<convoy-table-loader id="event_deliveries_loader" [tableHead]="eventDelTableHead" *ngIf="isloadingEventDeliveries"></convoy-table-loader>
+
 		<div class="table table--container has-loader" id="event-deliveries-table-container" *ngIf="displayedEventDeliveries && displayedEventDeliveries.length > 0">
 			<table id="table">
 				<thead>
@@ -182,12 +184,14 @@
 				</tbody>
 			</table>
 		</div>
+
 		<div class="flex flex__column flex__justify-center flex__align-items-center table--container" id="events-empty-state" *ngIf="displayedEventDeliveries?.length === 0">
 			<img src="/assets/img/empty-state.svg" alt="empty state" class="empty-state-img" />
 			<p class="font__14px font__weight-600 margin-top__0px color__black width__20 text--center">No event to show here</p>
 		</div>
 	</div>
 </div>
+
 <div class="button-container flex flex__align-items-center margin-top__16px">
 	<button
 		class="button button__white button__primary button__outline button--has-icon icon-left padding-y__4px padding-right__16px padding-left__4px"
@@ -201,6 +205,7 @@
 		</svg>
 		Previous
 	</button>
+
 	<button
 		class="button button__white button__primary button__outline button--has-icon icon-left padding-y__4px padding-left__16px padding-right__4px margin-left__16px"
 		routerLink="./"
@@ -214,6 +219,7 @@
 		</svg>
 	</button>
 </div>
+
 <div class="overlay" *ngIf="showOverlay" (click)="showOverlay = false; showEventDeliveriesAppsDropdown = false; showEventDeliveriesStatusDropdown = false"></div>
 <div class="_overlay" *ngIf="showBatchRetryModal" (click)="showBatchRetryModal = false"></div>
 <!-- batch retry modal  -->

web/ui/dashboard/src/app/private/pages/project/events/event-deliveries/event-deliveries.component.ts

@@ -83,6 +83,7 @@ export class EventDeliveriesComponent implements OnInit {
 		const page = requestDetails?.page || this.route.snapshot.queryParams.page || 1;
 		if (requestDetails?.addToURL) this.addFilterToURL();
 		const { startDate, endDate } = this.setDateForFilter({ ...this.dateFiltersFromURL, ...this.eventDelsTimeFilterData });
+		this.isloadingEventDeliveries = true;
 
 		try {
 			const eventDeliveriesResponse = await this.eventDeliveriesRequest({ pageNo: page, eventId: this.eventDeliveryFilteredByEventId, startDate, endDate });

web/ui/dashboard/src/app/private/pages/project/events/event/event.component.html

@@ -60,7 +60,7 @@
 	<div class="flex">
 		<div class="event__table">
 			<convoy-table-loader id="events_loader_loader" [tableHead]="eventsTableHead" *ngIf="isloadingEvents"></convoy-table-loader>
-			<div class="table table--container has-loader" id="events-table-container" *ngIf="displayedEvents && displayedEvents.length > 0">
+			<div class="table table--container has-loader" id="events-table-container" *ngIf="!isloadingEvents && displayedEvents && displayedEvents.length > 0">
 				<table id="table">
 					<thead>
 						<tr class="table--head">
@@ -115,7 +115,7 @@
 			</div>
 		</div>
 
-		<div class="event__details" *ngIf="displayedEvents && displayedEvents.length > 0">
+		<div class="event__details position__relative">
 			<div class="padding-all__16px">
 				<convoy-loader id="details_section_loader" *ngIf="isloadingEvents"></convoy-loader>
 

web/ui/dashboard/src/app/private/pages/project/events/event/event.component.ts

@@ -179,6 +179,8 @@ export class EventComponent implements OnInit {
 	}
 
 	async getEvents(requestDetails?: { appId?: string; addToURL?: boolean; page?: number }): Promise<HTTP_RESPONSE> {
+		this.isloadingEvents = true;
+
 		const page = requestDetails?.page || this.route.snapshot.queryParams.page || 1;
 		if (requestDetails?.appId) this.eventApp = requestDetails.appId;
 		if (requestDetails?.addToURL) this.addFilterToURL();

web/ui/dashboard/src/app/private/pages/project/events/events.component.html

@@ -9,6 +9,7 @@ <h1 class="font__12px font__weight-500 flex flex__align-items-center text__upper
 	</svg>
 	<span class="color__primary font__weight-500">Events</span>
 </h1>
+
 <div class="filter without-padding" [ngClass]="{ 'show-calendar': showFilterCalendar }">
 	<date-filter (selectedDateRange)="getSelectedDateRange($event)"></date-filter>
 	<div class="dropdown">
@@ -33,7 +34,7 @@ <h1 class="font__12px font__weight-500 flex flex__align-items-center text__upper
 	</div>
 </div>
 
-<div class="card">
+<div class="card position__relative">
 	<convoy-loader id="dashboard_summary_loader" *ngIf="isloadingDashboardData"></convoy-loader>
 	<ul class="metrics">
 		<li class="messages flex flex__align-items-center padding-x__30px padding-y__16px border__right">

web/ui/dashboard/src/app/private/pages/project/events/events.component.ts

@@ -46,20 +46,18 @@ export class EventsComponent implements OnInit {
 		return this.datePipe.transform(date, 'dd/MM/yyyy');
 	}
 
-	async fetchDashboardData(): Promise<HTTP_RESPONSE> {
+	async fetchDashboardData() {
 		try {
 			this.isloadingDashboardData = true;
 			const { startDate, endDate } = this.setDateForFilter(this.statsDateRange.value);
 
 			const dashboardResponse = await this.eventsService.dashboardSummary({ startDate: startDate || '', endDate: endDate || '', frequency: this.dashboardFrequency });
 			this.dashboardData = dashboardResponse.data;
-			this.isloadingDashboardData = false;
 			this.initChart(dashboardResponse);
 
-			return dashboardResponse;
+			this.isloadingDashboardData = false;
 		} catch (error: any) {
 			this.isloadingDashboardData = false;
-			return error;
 		}
 	}
 
@@ -132,8 +130,8 @@ export class EventsComponent implements OnInit {
 		}
 	}
 
-	getEventDeliveries(eventId: string){
-		this.eventDeliveryFilteredByEventId = eventId
-		this.toggleActiveTab('event deliveries') 
+	getEventDeliveries(eventId: string) {
+		this.eventDeliveryFilteredByEventId = eventId;
+		this.toggleActiveTab('event deliveries');
 	}
 }

web/ui/dashboard/src/app/private/pages/project/project.component.html

@@ -15,14 +15,25 @@
 
 		<nav class="sidebar--content padding-left__8px padding-right__24px">
 			<ul>
-				<li *ngFor="let nav of sideBarItems" class="animate">
-					<a [routerLink]="'.' + nav.route" routerLinkActive="active" class="flex flex__align-items-center color__grey padding-y__8px padding-left__24px margin-y__8px rounded__8px animate">
-						<svg width="18" height="18" class="margin-right__10px" fill="var(--grey-color)">
-							<use [attr.xlink:href]="'#' + nav.icon + '-icon'"></use>
-						</svg>
-						<span class="font__weight-500 font__14px animate">{{ nav.name }}</span>
-					</a>
-				</li>
+				<ng-container *ngIf="isLoadingProjectDetails">
+					<li *ngFor="let nav of sideBarItems" class="animate">
+						<div class="flex flex__align-items-center color__grey padding-y__8px padding-left__24px margin-y__8px rounded__8px animate">
+							<div class="skeleton-loader width__28px height__24px"></div>
+							<div class="skeleton-loader width__70 height__36px margin-left__8px"></div>
+						</div>
+					</li>
+				</ng-container>
+
+				<ng-container *ngIf="!isLoadingProjectDetails">
+					<li *ngFor="let nav of sideBarItems" class="animate">
+						<a [routerLink]="'.' + nav.route" routerLinkActive="active" class="flex flex__align-items-center color__grey padding-y__8px padding-left__24px margin-y__8px rounded__8px animate">
+							<svg width="18" height="18" class="margin-right__10px" fill="var(--grey-color)">
+								<use [attr.xlink:href]="'#' + nav.icon + '-icon'"></use>
+							</svg>
+							<span class="font__weight-500 font__14px animate">{{ nav.name }}</span>
+						</a>
+					</li>
+				</ng-container>
 			</ul>
 		</nav>
 

web/ui/dashboard/src/app/private/pages/project/project.component.ts

@@ -1,5 +1,6 @@
 import { Component, HostListener, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { GROUP } from 'src/app/models/group.model';
 import { PrivateService } from '../../private.service';
 import { ProjectService } from './project.service';
 
@@ -33,13 +34,33 @@ export class ProjectComponent implements OnInit {
 		}
 	];
 	shouldShowFullSideBar = true;
+	projectDetails!: GROUP;
+	isLoadingProjectDetails: boolean = true;
 
 	constructor(private route: ActivatedRoute, private privateService: PrivateService) {
 		this.privateService.activeProjectId = this.route.snapshot.params.id;
 	}
 
 	ngOnInit() {
 		this.checkScreenSize();
+		this.getProjectDetails();
+	}
+
+	async getProjectDetails() {
+		this.isLoadingProjectDetails = true;
+
+		try {
+			const projectDetails = await this.privateService.getProjectDetails();
+			this.projectDetails = projectDetails.data;
+			if (this.projectDetails.type === 'outgoing') this.sideBarItems.splice(1, 1);
+			this.isLoadingProjectDetails = false;
+		} catch (error) {
+			this.isLoadingProjectDetails = false;
+		}
+	}
+
+	isOutgoingProject(): boolean {
+		return this.projectDetails.type === 'outgoing';
 	}
 
 	checkScreenSize() {

web/ui/dashboard/src/app/private/pages/project/sources/sources.component.html

@@ -17,7 +17,8 @@ <h1 class="font__12px font__weight-500 flex flex__align-items-center text__upper
 <div class="card">
 	<div class="table has-loader flex flex__align-items-start" id="events-table-container">
 		<convoy-table-loader id="events_loader_loader" [tableHead]="sourcesTableHead" *ngIf="isLoadingSources"></convoy-table-loader>
-		<div class="table--container" [ngClass]="{ smaller: activeSource?.uid }">
+
+		<div class="table--container" *ngIf="!isLoadingSources && sources.content.length > 0" [ngClass]="{ smaller: activeSource?.uid }">
 			<table id="table">
 				<thead>
 					<tr class="table--head">
@@ -54,6 +55,11 @@ <h1 class="font__12px font__weight-500 flex flex__align-items-center text__upper
 			</table>
 		</div>
 
+		<div class="flex flex__column flex__justify-center flex__align-items-center table--container" id="events-empty-state" *ngIf="!isLoadingSources && sources?.content?.length == 0">
+			<img src="/assets/img/empty-state.svg" alt="empty state" class="empty-state-img" />
+			<p class="font__14px font__weight-600 margin-top__0px color__black width__20 text--center">No source yet</p>
+		</div>
+
 		<div class="table--sidebar height__100" [ngClass]="{ show: activeSource?.uid }">
 			<div class="modal--head--left flex flex__align-items-center flex__justify-between padding-right__24px">
 				<h2 class="padding-top__24px padding-bottom__16px font__16px font__weight-700">Source name goes here</h2>

web/ui/dashboard/src/app/private/pages/project/sources/sources.component.ts

@@ -34,8 +34,8 @@ export class SourcesComponent implements OnInit {
 		try {
 			const sourcesResponse = await this.privateService.getSources({ page });
 			this.sources = sourcesResponse.data;
+			if (this.sources.pagination.total > 0) this.activeSource = this.sources?.content.find(source => source.uid === this.route.snapshot.queryParams?.id);
 			this.isLoadingSources = false;
-			this.activeSource = this.sources?.content.find(source => source.uid === this.route.snapshot.queryParams?.id);
 		} catch (error) {
 			this.isLoadingSources = false;
 			return error;

web/ui/dashboard/src/app/private/pages/project/subscriptions/subscriptions.component.html

@@ -16,7 +16,43 @@ <h1 class="font__12px font__weight-500 flex flex__align-items-center text__upper
 
 <div>
 	<div class="table has-loader flex flex__align-items-start" id="events-table-container">
-		<div class="table--container" [ngClass]="{ smaller: activeSubscription?.uid }">
+		<div class="table--container" *ngIf="isLoadindingSubscriptions">
+			<div class="card padding-top__16px margin-bottom__16px" *ngFor="let subscription of subscriptionsLoaders">
+				<div class="border__bottom flex flex__align-items-center flex__justify-between padding-bottom__16px border--width__4">
+					<div class="padding-left__16px flex">
+						<div class="skeleton-loader width__120px height__20px"></div>
+						<div class="skeleton-loader width__32px height__20px margin-left__8px"></div>
+					</div>
+
+					<div class="flex flex__align-items-center">
+						<div class="tags margin-right__16px flex">
+							<div class="skeleton-loader width__100px height__20px"></div>
+							<div class="skeleton-loader width__100px height__20px margin-left__8px"></div>
+						</div>
+					</div>
+				</div>
+
+				<div class="flex flex__align-items-end flex__justify-between padding-bottom__8px padding-left__16px margin-top__8px">
+					<div class="width__100">
+						<div class="color__grey font__10px margin-bottom__12px">
+							<div class="skeleton-loader width__36px height__20px"></div>
+						</div>
+						<div class="skeleton-loader width__100px height__20px"></div>
+					</div>
+					<div class="width__100">
+						<div class="skeleton-loader width__100px height__20px"></div>
+					</div>
+					<div class="width__100">
+						<div class="skeleton-loader width__100px height__20px"></div>
+					</div>
+					<div class="width__50">
+						<div class="skeleton-loader width__100px height__20px"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="table--container" *ngIf="!isLoadindingSubscriptions && subscriptions.content.length > 0" [ngClass]="{ smaller: activeSubscription?.uid }">
 			<div class="card padding-top__16px margin-bottom__16px" *ngFor="let subscription of subscriptions?.content">
 				<a routerLink="./" [queryParams]="{ id: subscription.uid }" class="border__bottom flex flex__align-items-center flex__justify-between padding-bottom__16px border--width__4">
 					<h4 class="padding-left__16px font__14px font__weight-500">
@@ -81,7 +117,7 @@ <h4 class="padding-left__16px font__14px font__weight-500">
 			</div>
 		</div>
 
-		<div class="table--sidebar height__100 bg__white margin-left__8px card show" *ngIf="activeSubscription?.uid">
+		<div class="table--sidebar height__100 bg__white margin-left__8px card show" *ngIf="!isLoadindingSubscriptions && activeSubscription?.uid">
 			<div class="modal--head--left flex flex__align-items-center flex__justify-between padding-right__24px">
 				<h2 class="padding-top__24px padding-bottom__16px font__16px font__weight-700">{{ activeSubscription?.name }}</h2>
 				<a
@@ -140,6 +176,11 @@ <h2 class="padding-top__24px padding-bottom__16px font__16px font__weight-700">{
 				</button>
 			</div>
 		</div>
+
+		<div class="flex flex__column flex__justify-center flex__align-items-center table--container" id="events-empty-state" *ngIf="!isLoadindingSubscriptions && subscriptions.content.length == 0">
+			<img src="/assets/img/empty-state.svg" alt="empty state" class="empty-state-img" />
+			<p class="font__14px font__weight-600 margin-top__0px color__black width__20 text--center">No subscriptions yet</p>
+		</div>
 	</div>
 </div>
 

web/ui/dashboard/src/app/private/pages/project/subscriptions/subscriptions.component.scss

@@ -0,0 +1,7 @@
+.width__120px {
+	width: 120px;
+}
+
+.width__100px {
+	width: 100px;
+}