Browse Source

Feature/add a skeleton loader to changelog page (#4891)

* Add a skeleton loader to changelog page

* Update changelog
pull/4895/head
Fabio Carlos 3 weeks ago
committed by GitHub
parent
commit
8d3e12c646
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 1
      CHANGELOG.md
  2. 6
      apps/client/src/app/pages/about/changelog/changelog-page.component.ts
  3. 45
      apps/client/src/app/pages/about/changelog/changelog-page.html
  4. 4
      apps/client/src/app/pages/about/changelog/changelog-page.module.ts

1
CHANGELOG.md

@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
- Included quick links in the search results of the assistant
- Added a skeleton loader to the changelog page
- Extended the content of the _Self-Hosting_ section by information about additional data providers on the Frequently Asked Questions (FAQ) page
### Changed

6
apps/client/src/app/pages/about/changelog/changelog-page.component.ts

@ -8,8 +8,14 @@ import { Subject } from 'rxjs';
standalone: false
})
export class ChangelogPageComponent implements OnDestroy {
public isLoading = true;
private unsubscribeSubject = new Subject<void>();
public onLoad() {
this.isLoading = false;
}
public ngOnDestroy() {
this.unsubscribeSubject.next();
this.unsubscribeSubject.complete();

45
apps/client/src/app/pages/about/changelog/changelog-page.html

@ -2,8 +2,51 @@
<div class="mb-5 row">
<div class="col">
<h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Changelog</h1>
@if (isLoading) {
<ngx-skeleton-loader
animation="pulse"
[theme]="{
height: '1.5rem',
width: '12rem'
}"
/>
<ngx-skeleton-loader
animation="pulse"
class="mt-3"
[theme]="{
height: '1.25rem',
width: '5rem'
}"
/>
<ngx-skeleton-loader
animation="pulse"
class="mt-3"
[theme]="{
height: '1.25rem',
width: '50%'
}"
/>
<ngx-skeleton-loader
animation="pulse"
class="mt-2"
[theme]="{
height: '1.25rem',
width: '75%'
}"
/>
<ngx-skeleton-loader
animation="pulse"
class="mt-2"
[theme]="{
height: '1.25rem',
width: '67%'
}"
/>
}
<div class="changelog">
<markdown [src]="'../assets/CHANGELOG.md'"></markdown>
<markdown [src]="'../assets/CHANGELOG.md'" (load)="onLoad()"></markdown>
</div>
</div>
</div>

4
apps/client/src/app/pages/about/changelog/changelog-page.module.ts

@ -1,6 +1,7 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MarkdownModule } from 'ngx-markdown';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { ChangelogPageRoutingModule } from './changelog-page-routing.module';
import { ChangelogPageComponent } from './changelog-page.component';
@ -10,7 +11,8 @@ import { ChangelogPageComponent } from './changelog-page.component';
imports: [
ChangelogPageRoutingModule,
CommonModule,
MarkdownModule.forChild()
MarkdownModule.forChild(),
NgxSkeletonLoaderModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Loading…
Cancel
Save