aljaz/angor-hub-old
1
1
Fork 0
mirror of https://github.com/block-core/angor-hub-old.git synced 2026-02-23 20:14:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Show loading while data is loading and not "No projects"

Browse Source
This commit is contained in:
SondreB
2024-11-27 22:57:26 +01:00
parent a71b6114be
commit 7ab4e6bb3c
2 changed files with 43 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/components/bookmark/bookmark.component.html
View File

@@ -126,15 +126,22 @@
</angor-card>
</ng-container>
</div>
<ng-container *ngIf="savedProjects.length == 0">
<!-- Loading spinner -->
<ng-container *ngIf="isLoading">
<div class="flex flex-auto flex-col items-center justify-center">
<mat-spinner [diameter]="40"></mat-spinner>
<div class="text-secondary mt-4 text-lg">Loading projects...</div>
</div>
</ng-container>
<!-- No projects message -->
<ng-container *ngIf="!isLoading && savedProjects.length === 0">
<div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
<mat-icon class="icon-size-24" [svgIcon]="'heroicons_outline:archive-box-x-mark'"></mat-icon>
<div class="text-secondary mt-4 text-2xl font-semibold tracking-tight">
No project
No projects
</div>
</div>
</ng-container>
</div>
</div>
</div>

59
src/app/components/bookmark/bookmark.component.ts
View File

@@ -1,20 +1,19 @@
import { AngorCardComponent } from '@angor/components/card';
import { AngorFindByKeyPipe } from '@angor/pipes/find-by-key';
import { CdkScrollable } from '@angular/cdk/scrolling';
import { NgClass, PercentPipe, I18nPluralPipe, CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { CommonModule, NgClass } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTooltipModule } from '@angular/material/tooltip';
import { Router, RouterLink } from '@angular/router';
import { BookmarkService } from 'app/services/bookmark.service';
import { Router } from '@angular/router';
import { Project } from 'app/interface/project.interface';
import { BookmarkService } from 'app/services/bookmark.service';
import { StorageService } from 'app/services/storage.service';
import { Observable, Subject, takeUntil } from 'rxjs';
@@ -34,19 +33,21 @@ import { Observable, Subject, takeUntil } from 'rxjs';
MatTooltipModule,
MatProgressBarModule,
CommonModule,
MatProgressSpinnerModule,
],
templateUrl: './bookmark.component.html',
styleUrls: ['./bookmark.component.scss']
styleUrls: ['./bookmark.component.scss'],
})
export class BookmarkComponent implements OnInit, OnDestroy {
savedProjects: Project[] = [];
bookmarks$: Observable<string[]>;
isLoading = true; // Add this line
private _unsubscribeAll = new Subject<any>();
constructor(
private _bookmarkService: BookmarkService,
private _storageService: StorageService,
private _router: Router,
private _router: Router
) {
this.bookmarks$ = this._bookmarkService.bookmarks$;
}
@@ -62,27 +63,34 @@ export class BookmarkComponent implements OnInit, OnDestroy {
}
private async loadBookmarkedProjects(): Promise<void> {
this.isLoading = true; // Add this line
const bookmarkIds = await this._bookmarkService.getBookmarks();
const projects = await this._storageService.getProjectsByNostrPubKeys(bookmarkIds);
this.savedProjects = projects;
this.fetchMetadataForProjects(this.savedProjects); // Fetch metadata for loaded projects
const projects =
await this._storageService.getProjectsByNostrPubKeys(bookmarkIds);
}
private subscribeToBookmarkChanges(): void {
this.bookmarks$.pipe(takeUntil(this._unsubscribeAll)).subscribe(async (bookmarkIds) => {
const projects = await this._storageService.getProjectsByNostrPubKeys(bookmarkIds);
this.savedProjects = projects;
this.fetchMetadataForProjects(this.savedProjects); // Fetch metadata for updated projects
});
this.bookmarks$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(async (bookmarkIds) => {
const projects =
await this._storageService.getProjectsByNostrPubKeys(
bookmarkIds
);
this.savedProjects = projects;
this.fetchMetadataForProjects(this.savedProjects); // Fetch metadata for updated projects
});
}
private fetchMetadataForProjects(projects: Project[]): void {
projects.forEach(project => {
this._storageService.getProfile(project.nostrPubKey).then(profileMetadata => {
if (profileMetadata) {
this.updateProjectMetadata(project, profileMetadata);
}
});
projects.forEach((project) => {
this._storageService
.getProfile(project.nostrPubKey)
.then((profileMetadata) => {
if (profileMetadata) {
this.updateProjectMetadata(project, profileMetadata);
}
});
});
}
@@ -94,7 +102,8 @@ export class BookmarkComponent implements OnInit, OnDestroy {
}
async toggleBookmark(projectNpub: string): Promise<void> {
const isBookmarked = await this._bookmarkService.isBookmarked(projectNpub);
const isBookmarked =
await this._bookmarkService.isBookmarked(projectNpub);
if (isBookmarked) {
await this._bookmarkService.removeBookmark(projectNpub);
} else {
@@ -110,9 +119,7 @@ export class BookmarkComponent implements OnInit, OnDestroy {
goToProjectDetails(project: Project): void {
this._router.navigate(['/profile', project.nostrPubKey]);
}
openChat(pubKey : string): void
{
openChat(pubKey: string): void {
this._router.navigate(['/chat', pubKey]);
}
}