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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with
54 additions and
2 deletions
-
CHANGELOG.md
-
apps/client/src/app/pages/about/changelog/changelog-page.component.ts
-
apps/client/src/app/pages/about/changelog/changelog-page.html
-
apps/client/src/app/pages/about/changelog/changelog-page.module.ts
|
|
@ -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 |
|
|
|
|
|
@ -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(); |
|
|
|
|
|
@ -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> |
|
|
|
|
|
@ -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] |
|
|
|
}) |
|
|
|