PrimeNG Skeleton

store.service

public isLoading = {
  top10TopicGroup: signal<boolean>(false),
  trendingTopicGroup: signal<boolean>(false),
  freshAndHotTopicGroup: signal<boolean>(false),
  portfolioTopicGroups: signal<boolean>(false),
  preferredArticles: signal<boolean>(false)
};

// Ha bármelyik tölt, ez true
public readonly loadingSignals: Signal<boolean>[] = [
  this.isLoading.top10TopicGroup,
  this.isLoading.trendingTopicGroup,
  this.isLoading.freshAndHotTopicGroup,
  this.isLoading.portfolioTopicGroups,
  this.isLoading.preferredArticles
];

public readonly isLoadingAny = computed(() => this.loadingSignals.some((s) => s()));

Child Template

@if (loading()) {
  <p-skeleton width="650px" height="32px" borderRadius="8px" />
  <p-skeleton width="150px" height="24px" borderRadius="6px" />
} @else {
  Real content
}

Child Component

public readonly loading = input<boolean>(false);

Parent Component

public mainStoreService = inject(MainStoreService);

Parent Template

@let loading = mainStoreService.isLoading;
<app-topbar [loading]="mainStoreService.isLoadingAny()"></app-topbar>