Merge pull request #899 from paperless-ngx/feature-dashboard-loading-indicators

Feature: initial app loading indicators
2025-04-02 13:45:10 -05:00 · 2022-05-10 17:01:37 -07:00 · 2022-05-10 17:01:37 -07:00 · 2510216f21
commit 2510216f21
parent e4d7ae9718 b30c4275ef
11 changed files with 40 additions and 19 deletions
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@ -70,8 +70,9 @@
          </li>
        </ul>

-        <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='savedViewService.sidebarViews.length > 0'>
+        <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='savedViewService.loading || savedViewService.sidebarViews.length > 0'>
          <ng-container i18n>Saved views</ng-container>
+          <div *ngIf="savedViewService.loading" class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
        </h6>
        <ul class="nav flex-column mb-2">
          <li class="nav-item w-100" *ngFor="let view of savedViewService.sidebarViews">
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@ -9,6 +9,11 @@
  z-index: 995; /* Behind the navbar */
  padding: 50px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+
+  .sidebar-heading .spinner-border {
+    width: 0.8em;
+    height: 0.8em;
+  }
 }
@media (max-width: 767.98px) {
  .sidebar {
--- a/src-ui/src/app/components/dashboard/dashboard.component.html
+++ b/src-ui/src/app/components/dashboard/dashboard.component.html
@ -21,9 +21,14 @@

 <div class='row'>
  <div class="col-lg-8">
-    <app-welcome-widget *ngIf="savedViews.length == 0"></app-welcome-widget>
+    <ng-container *ngIf="savedViewService.loading">
+      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+      <ng-container i18n>Loading...</ng-container>
+    </ng-container>

-    <ng-container *ngFor="let v of savedViews">
+    <app-welcome-widget *ngIf="!savedViewService.loading && savedViewService.dashboardViews.length == 0"></app-welcome-widget>
+
+    <ng-container *ngFor="let v of savedViewService.dashboardViews">
      <app-saved-view-widget [savedView]="v"></app-saved-view-widget>
    </ng-container>

--- a/src-ui/src/app/components/dashboard/dashboard.component.ts
+++ b/src-ui/src/app/components/dashboard/dashboard.component.ts
@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
-import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'

@Component({
@ -8,8 +7,8 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service'
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
 })
-export class DashboardComponent implements OnInit {
-  constructor(private savedViewService: SavedViewService, private meta: Meta) {}
+export class DashboardComponent {
+  constructor(public savedViewService: SavedViewService, private meta: Meta) {}

  get displayName() {
    let tagFullName = this.meta.getTag('name=full_name')
@ -30,14 +29,4 @@ export class DashboardComponent implements OnInit {
      return $localize`Welcome to Paperless-ngx!`
    }
  }
-
-  savedViews: PaperlessSavedView[] = []
-
-  ngOnInit(): void {
-    this.savedViewService.listAll().subscribe((results) => {
-      this.savedViews = results.results.filter(
-        (savedView) => savedView.show_on_dashboard
-      )
-    })
-  }
 }
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
@ -1,4 +1,4 @@
-<app-widget-frame [title]="savedView.name">
+<app-widget-frame [title]="savedView.name" [loading]="loading">

  <a class="btn-link" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>

--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
@ -15,6 +15,8 @@ import { QueryParamsService } from 'src/app/services/query-params.service'
  styleUrls: ['./saved-view-widget.component.scss'],
 })
 export class SavedViewWidgetComponent implements OnInit, OnDestroy {
+  loading: boolean = true
+
  constructor(
    private documentService: DocumentService,
    private router: Router,
@ -43,6 +45,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy {
  }

  reload() {
+    this.loading = true
    this.documentService
      .listFiltered(
        1,
@ -52,6 +55,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy {
        this.savedView.filter_rules
      )
      .subscribe((result) => {
+        this.loading = false
        this.documents = result.results
      })
  }
--- a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
@ -1,4 +1,4 @@
-<app-widget-frame title="Statistics" i18n-title>
+<app-widget-frame title="Statistics" [loading]="loading" i18n-title>
  <ng-container content>
    <p class="card-text" i18n *ngIf="statistics?.documents_inbox != null">Documents in inbox: {{statistics?.documents_inbox}}</p>
    <p class="card-text" i18n>Total documents: {{statistics?.documents_total}}</p>
--- a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts
@ -15,6 +15,8 @@ export interface Statistics {
  styleUrls: ['./statistics-widget.component.scss'],
 })
 export class StatisticsWidgetComponent implements OnInit, OnDestroy {
+  loading: boolean = true
+
  constructor(
    private http: HttpClient,
    private consumerStatusService: ConsumerStatusService
@ -29,7 +31,9 @@ export class StatisticsWidgetComponent implements OnInit, OnDestroy {
  }

  reload() {
+    this.loading = true
    this.getStatistics().subscribe((statistics) => {
+      this.loading = false
      this.statistics = statistics
    })
  }
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
@ -2,6 +2,10 @@
  <div class="card-header">
    <div class="d-flex justify-content-between align-items-center">
      <h5 class="card-title mb-0">{{title}}</h5>
+      <ng-container *ngIf="loading">
+        <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+        <div class="visually-hidden" i18n>Loading...</div>
+      </ng-container>
      <ng-content select ="[header-buttons]"></ng-content>
    </div>

--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
@ -11,5 +11,8 @@ export class WidgetFrameComponent implements OnInit {
  @Input()
  title: string

+  @Input()
+  loading: boolean = false
+
  ngOnInit(): void {}
 }
--- a/src-ui/src/app/services/rest/saved-view.service.ts
+++ b/src-ui/src/app/services/rest/saved-view.service.ts
@ -9,13 +9,19 @@ import { AbstractPaperlessService } from './abstract-paperless-service'
  providedIn: 'root',
 })
 export class SavedViewService extends AbstractPaperlessService<PaperlessSavedView> {
+  loading: boolean
+
  constructor(http: HttpClient) {
    super(http, 'saved_views')
    this.reload()
  }

  private reload() {
-    this.listAll().subscribe((r) => (this.savedViews = r.results))
+    this.loading = true
+    this.listAll().subscribe((r) => {
+      this.savedViews = r.results
+      this.loading = false
+    })
  }

  private savedViews: PaperlessSavedView[] = []