diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
index 9318e925b..be7737894 100644
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html
@@ -64,8 +64,8 @@
Channels |
Location |
-
-
+
+
{{ node.alias }}
|
@@ -116,5 +116,10 @@
+
+
diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss
index 25e4cf7f3..97d42298c 100644
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss
@@ -22,14 +22,14 @@
.timestamp-first {
width: 20%;
- @media (max-width: 576px) {
+ @media (max-width: 1060px) {
display: none
}
}
.timestamp-update {
width: 16%;
- @media (max-width: 576px) {
+ @media (max-width: 1060px) {
display: none
}
}
@@ -50,7 +50,7 @@
.city {
max-width: 150px;
- @media (max-width: 576px) {
+ @media (max-width: 675px) {
display: none
}
}
\ No newline at end of file
diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts
index 19dd999ee..4035b62d4 100644
--- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts
+++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts
@@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
-import { map, Observable, share } from 'rxjs';
+import { BehaviorSubject, combineLatest, map, Observable, share, tap } from 'rxjs';
import { ApiService } from '../../services/api.service';
import { SeoService } from '../../services/seo.service';
import { getFlagEmoji } from '../../shared/common.utils';
@@ -15,6 +15,12 @@ import { GeolocationData } from '../../shared/components/geolocation/geolocation
export class NodesPerCountry implements OnInit {
nodes$: Observable;
country: {name: string, flag: string};
+ nodesPagination$: Observable;
+ startingIndexSubject: BehaviorSubject = new BehaviorSubject(0);
+ page = 1;
+ pageSize = 15;
+ maxSize = window.innerWidth <= 767.98 ? 3 : 5;
+ isLoading = true;
skeletonLines: number[] = [];
@@ -23,7 +29,7 @@ export class NodesPerCountry implements OnInit {
private seoService: SeoService,
private route: ActivatedRoute,
) {
- for (let i = 0; i < 20; ++i) {
+ for (let i = 0; i < this.pageSize; ++i) {
this.skeletonLines.push(i);
}
}
@@ -31,6 +37,7 @@ export class NodesPerCountry implements OnInit {
ngOnInit(): void {
this.nodes$ = this.apiService.getNodeForCountry$(this.route.snapshot.params.country)
.pipe(
+ tap(() => this.isLoading = true),
map(response => {
this.seoService.setTitle($localize`Lightning nodes in ${response.country.en}`);
this.seoService.setDescription($localize`:@@meta.description.lightning.nodes-country:Explore all the Lightning nodes hosted in ${response.country.en} and see an overview of each node's capacity, number of open channels, and more.`);
@@ -87,11 +94,21 @@ export class NodesPerCountry implements OnInit {
ispCount: Object.keys(isps).length
};
}),
+ tap(() => this.isLoading = false),
share()
);
+
+ this.nodesPagination$ = combineLatest([this.nodes$, this.startingIndexSubject]).pipe(
+ map(([response, startingIndex]) => response.nodes.slice(startingIndex, startingIndex + this.pageSize))
+ );
}
trackByPublicKey(index: number, node: any): string {
return node.public_key;
}
+
+ pageChange(page: number): void {
+ this.startingIndexSubject.next((page - 1) * this.pageSize);
+ this.page = page;
+ }
}
diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
index 3daafe4db..865d2d2dd 100644
--- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
+++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html
@@ -61,8 +61,8 @@
Channels |
Location |
-
-
+
+
{{ node.alias }}
|
@@ -113,5 +113,10 @@
+
+
diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss
index b829c5b59..b043d36f8 100644
--- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss
@@ -24,7 +24,7 @@
.timestamp-first {
width: 20%;
- @media (max-width: 576px) {
+ @media (max-width: 1060px) {
display: none
}
}
@@ -32,7 +32,7 @@
.timestamp-update {
width: 16%;
- @media (max-width: 576px) {
+ @media (max-width: 1060px) {
display: none
}
}
@@ -56,7 +56,7 @@
.city {
max-width: 150px;
- @media (max-width: 576px) {
+ @media (max-width: 675px) {
display: none
}
}
diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts
index d4f27975c..f6c61a9f6 100644
--- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts
+++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts
@@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
-import { map, Observable, share } from 'rxjs';
+import { BehaviorSubject, combineLatest, map, Observable, share, tap } from 'rxjs';
import { ApiService } from '../../services/api.service';
import { SeoService } from '../../services/seo.service';
import { getFlagEmoji } from '../../shared/common.utils';
@@ -15,6 +15,12 @@ import { GeolocationData } from '../../shared/components/geolocation/geolocation
export class NodesPerISP implements OnInit {
nodes$: Observable;
isp: {name: string, id: number};
+ nodesPagination$: Observable;
+ startingIndexSubject: BehaviorSubject = new BehaviorSubject(0);
+ page = 1;
+ pageSize = 15;
+ maxSize = window.innerWidth <= 767.98 ? 3 : 5;
+ isLoading = true;
skeletonLines: number[] = [];
@@ -23,7 +29,7 @@ export class NodesPerISP implements OnInit {
private seoService: SeoService,
private route: ActivatedRoute,
) {
- for (let i = 0; i < 20; ++i) {
+ for (let i = 0; i < this.pageSize; ++i) {
this.skeletonLines.push(i);
}
}
@@ -31,6 +37,7 @@ export class NodesPerISP implements OnInit {
ngOnInit(): void {
this.nodes$ = this.apiService.getNodeForISP$(this.route.snapshot.params.isp)
.pipe(
+ tap(() => this.isLoading = true),
map(response => {
this.isp = {
name: response.isp,
@@ -77,11 +84,21 @@ export class NodesPerISP implements OnInit {
topCountry: topCountry,
};
}),
+ tap(() => this.isLoading = false),
share()
);
+
+ this.nodesPagination$ = combineLatest([this.nodes$, this.startingIndexSubject]).pipe(
+ map(([response, startingIndex]) => response.nodes.slice(startingIndex, startingIndex + this.pageSize))
+ );
}
trackByPublicKey(index: number, node: any): string {
return node.public_key;
}
+
+ pageChange(page: number): void {
+ this.startingIndexSubject.next((page - 1) * this.pageSize);
+ this.page = page;
+ }
}