Show loading info aside

fboeller · Mar 7, 2021 · 4ef9c31 · 4ef9c31
1 parent 3487281
commit 4ef9c31
Show file tree

Hide file tree

Showing 15 changed files with 191 additions and 77 deletions.
diff --git a/.../app/examples/custom-default-loading-example/custom-default-loading-example.component.css b/.../app/examples/custom-default-loading-example/custom-default-loading-example.component.css
@@ -0,0 +1,16 @@
+.loadables {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 50px;
+}
+
+:host {
+  display: grid;
+  grid-template-areas: "main aside";
+  grid-template-columns: auto 500px;
+  gap: 30px;
+}
+
+aside {
+  grid-area: "aside";
+}
diff --git a/...app/examples/custom-default-loading-example/custom-default-loading-example.component.html b/...app/examples/custom-default-loading-example/custom-default-loading-example.component.html
@@ -1,11 +1,19 @@
-<h2>Custom default loading template</h2>
-<p>
-  This example displays the usage of the `ld-loadable` component with a loading
-  component that is registered as a default for all `ld-loadable` components in
-  that module.
-</p>
-<app-load-form (loadable)="loadable = $event"></app-load-form>
-<ld-loadable [loadable]="loadable">
-  <h3>Loaded</h3>
-  <pre>{{ loadable | loadedValue | json }}</pre>
-</ld-loadable>
+<div class="main">
+  <h2>Custom default loading template</h2>
+  <p>
+    This example displays the usage of the `ld-loadable` component with a
+    loading component that is registered as a default for all `ld-loadable`
+    components in that module.
+  </p>
+  <app-load-form (loadable)="loadable = $event"></app-load-form>
+  <ld-loadable [loadable]="loadable">
+    <h3>Loaded</h3>
+    <pre>{{ loadable | loadedValue | json }}</pre>
+  </ld-loadable>
+</div>
+<aside>
+  <div>
+    <h3>State of the loadable</h3>
+    <pre>{{ loadable | json }}</pre>
+  </div>
+</aside>
diff --git a/...c/app/examples/custom-default-loading-example/custom-default-loading-example.component.ts b/...c/app/examples/custom-default-loading-example/custom-default-loading-example.component.ts
@@ -5,6 +5,7 @@ import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
 @Component({
   selector: 'app-custom-default-loading-example',
   templateUrl: './custom-default-loading-example.component.html',
+  styleUrls: ['./custom-default-loading-example.component.css'],
 })
 export class CustomDefaultLoadingExampleComponent {
   loadable: Loadable<object> = idle;

diff --git a/...pp/examples/custom-loading-template-example/custom-loading-template-example.component.css b/...pp/examples/custom-loading-template-example/custom-loading-template-example.component.css
@@ -3,3 +3,14 @@
   grid-template-columns: repeat(2, 1fr);
   gap: 50px;
 }
+
+:host {
+  display: grid;
+  grid-template-areas: "main aside";
+  grid-template-columns: auto 500px;
+  gap: 30px;
+}
+
+aside {
+  grid-area: "aside";
+}
diff --git a/...p/examples/custom-loading-template-example/custom-loading-template-example.component.html b/...p/examples/custom-loading-template-example/custom-loading-template-example.component.html
@@ -1,24 +1,28 @@
-<h2>Custom loading template</h2>
-<p>
-  This example displays the usage of the `ld-loadable` component with a custom
-  loading template. The left loadable uses the custom loading template while the
-  right component uses the default.
-</p>
-<app-load-form (loadable)="loadable = $event"></app-load-form>
-<div>
-  <h3>State of the loadable</h3>
-  <pre>{{ loadable | json }}</pre>
-</div>
-<div class="loadables">
-  <ld-loadable [loadable]="loadable" [templates]="{ loading: loading }">
-    <h3>Loaded</h3>
-    <pre>{{ loadable | loadedValue | json }}</pre>
-  </ld-loadable>
-  <ng-template #loading>
-    <p>The answer is currently being computed.</p>
-  </ng-template>
-  <ld-loadable [loadable]="loadable">
-    <h3>Loaded</h3>
-    <pre>{{ loadable | loadedValue | json }}</pre>
-  </ld-loadable>
+<div class="main">
+  <h2>Custom loading template</h2>
+  <p>
+    This example displays the usage of the `ld-loadable` component with a custom
+    loading template. The left loadable uses the custom loading template while
+    the right component uses the default.
+  </p>
+  <app-load-form (loadable)="loadable = $event"></app-load-form>
+  <div class="loadables">
+    <ld-loadable [loadable]="loadable" [templates]="{ loading: loading }">
+      <h3>Loaded</h3>
+      <pre>{{ loadable | loadedValue | json }}</pre>
+    </ld-loadable>
+    <ng-template #loading>
+      <p>The answer is currently being computed.</p>
+    </ng-template>
+    <ld-loadable [loadable]="loadable">
+      <h3>Loaded</h3>
+      <pre>{{ loadable | loadedValue | json }}</pre>
+    </ld-loadable>
+  </div>
 </div>
+<aside>
+  <div>
+    <h3>State of the loadable</h3>
+    <pre>{{ loadable | json }}</pre>
+  </div>
+</aside>
diff --git a/projects/example-app/src/app/examples/default-example/default-example.component.css b/projects/example-app/src/app/examples/default-example/default-example.component.css
@@ -0,0 +1,16 @@
+.loadables {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 50px;
+}
+
+:host {
+  display: grid;
+  grid-template-areas: "main aside";
+  grid-template-columns: auto 500px;
+  gap: 30px;
+}
+
+aside {
+  grid-area: "aside";
+}
diff --git a/projects/example-app/src/app/examples/default-example/default-example.component.html b/projects/example-app/src/app/examples/default-example/default-example.component.html
@@ -1,14 +1,22 @@
-<h2>Default usage example</h2>
-<p>
-  This examples displays the default usage of the `ld-loadable` component. The
-  `LoadableModule` is imported with the default loading and error components.
-</p>
-<app-load-form (loadable)="loadable = $event"></app-load-form>
-<div>
-  <h3>State of the loadable</h3>
-  <pre>{{ loadable | json }}</pre>
+<div class="main">
+  <h2>Default usage example</h2>
+  <p>
+    This examples displays the default usage of the `ld-loadable` component. The
+    `LoadableModule` is imported with the default loading and error components.
+  </p>
+  <app-load-form (loadable)="loadable = $event"></app-load-form>
+  <div>
+    <h3>State of the loadable</h3>
+    <pre>{{ loadable | json }}</pre>
+  </div>
+  <ld-loadable [loadable]="loadable">
+    <h3>Loaded</h3>
+    <pre>{{ loadable | loadedValue | json }}</pre>
+  </ld-loadable>
 </div>
-<ld-loadable [loadable]="loadable">
-  <h3>Loaded</h3>
-  <pre>{{ loadable | loadedValue | json }}</pre>
-</ld-loadable>
+<aside>
+  <div>
+    <h3>State of the loadable</h3>
+    <pre>{{ loadable | json }}</pre>
+  </div>
+</aside>
diff --git a/projects/example-app/src/app/examples/default-example/default-example.component.ts b/projects/example-app/src/app/examples/default-example/default-example.component.ts
@@ -5,6 +5,7 @@ import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
 @Component({
   selector: 'app-default-example',
   templateUrl: './default-example.component.html',
+  styleUrls: ['./default-example.component.css'],
 })
 export class DefaultExampleComponent {
   loadable: Loadable<object> = idle;

diff --git a/projects/example-app/src/app/examples/lightweight-example/lightweight-example.component.css b/projects/example-app/src/app/examples/lightweight-example/lightweight-example.component.css
@@ -0,0 +1,16 @@
+.loadables {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 50px;
+}
+
+:host {
+  display: grid;
+  grid-template-areas: "main aside";
+  grid-template-columns: auto 500px;
+  gap: 30px;
+}
+
+aside {
+  grid-area: "aside";
+}
diff --git a/projects/example-app/src/app/examples/lightweight-example/lightweight-example.component.html b/projects/example-app/src/app/examples/lightweight-example/lightweight-example.component.html
@@ -1,18 +1,26 @@
-<h2>Lightweight example</h2>
-<p>
-  This example displays the usage of the loadable type in Angular components
-  without the usage of the `ld-loadable` component. This might be useful if you
-  need more control over the display of the loadable object.
-</p>
-<app-load-form (loadable)="loadable = $event"></app-load-form>
-<ng-container [ngSwitch]="loadable | loadingState">
-  <ld-loadable-loading *ngSwitchCase="'loading'"></ld-loadable-loading>
-  <div *ngSwitchCase="'loaded'">
-    <h3>Loaded</h3>
-    <pre>{{ loadable | loadedValue | json }}</pre>
+<div class="main">
+  <h2>Lightweight example</h2>
+  <p>
+    This example displays the usage of the loadable type in Angular components
+    without the usage of the `ld-loadable` component. This might be useful if
+    you need more control over the display of the loadable object.
+  </p>
+  <app-load-form (loadable)="loadable = $event"></app-load-form>
+  <ng-container [ngSwitch]="loadable | loadingState">
+    <ld-loadable-loading *ngSwitchCase="'loading'"></ld-loadable-loading>
+    <div *ngSwitchCase="'loaded'">
+      <h3>Loaded</h3>
+      <pre>{{ loadable | loadedValue | json }}</pre>
+    </div>
+    <ld-loadable-error
+      *ngSwitchCase="'error'"
+      [error]="loadable.error"
+    ></ld-loadable-error>
+  </ng-container>
+</div>
+<aside>
+  <div>
+    <h3>State of the loadable</h3>
+    <pre>{{ loadable | json }}</pre>
   </div>
-  <ld-loadable-error
-    *ngSwitchCase="'error'"
-    [error]="loadable.error"
-  ></ld-loadable-error>
-</ng-container>
+</aside>
diff --git a/projects/example-app/src/app/examples/lightweight-example/lightweight-example.component.ts b/projects/example-app/src/app/examples/lightweight-example/lightweight-example.component.ts
@@ -5,6 +5,7 @@ import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
 @Component({
   selector: 'app-lightweight-example',
   templateUrl: './lightweight-example.component.html',
+  styleUrls: ['./lightweight-example.component.css'],
 })
 export class LightweightExampleComponent {
   loadable: Loadable<object> = idle;

diff --git a/projects/example-app/src/app/examples/ngrx-example/ngrx-example.component.css b/projects/example-app/src/app/examples/ngrx-example/ngrx-example.component.css
@@ -0,0 +1,16 @@
+.loadables {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 50px;
+}
+
+:host {
+  display: grid;
+  grid-template-areas: "main aside";
+  grid-template-columns: auto 500px;
+  gap: 30px;
+}
+
+aside {
+  grid-area: "aside";
+}
diff --git a/projects/example-app/src/app/examples/ngrx-example/ngrx-example.component.html b/projects/example-app/src/app/examples/ngrx-example/ngrx-example.component.html
@@ -1,11 +1,19 @@
-<h2>NgRx</h2>
-<p>
-  This example displays how objects of the loadable type can be stored with
-  NgRx.
-</p>
-<button (click)="load(42, false)">Load</button>
-<button (click)="load(42, true)">Load with error</button>
-<ld-loadable *ngIf="loadable$ | async as loadable" [loadable]="loadable">
-  <h3>Loaded</h3>
-  <pre>{{ loadable.value | json }}</pre>
-</ld-loadable>
+<div class="main">
+  <h2>NgRx</h2>
+  <p>
+    This example displays how objects of the loadable type can be stored with
+    NgRx.
+  </p>
+  <button (click)="load(42, false)">Load</button>
+  <button (click)="load(42, true)">Load with error</button>
+  <ld-loadable *ngIf="loadable$ | async as loadable" [loadable]="loadable">
+    <h3>Loaded</h3>
+    <pre>{{ loadable.value | json }}</pre>
+  </ld-loadable>
+</div>
+<aside>
+  <div>
+    <h3>State of the loadable</h3>
+    <pre>{{ loadable$ | async | json }}</pre>
+  </div>
+</aside>
diff --git a/projects/example-app/src/app/examples/ngrx-example/ngrx-example.component.ts b/projects/example-app/src/app/examples/ngrx-example/ngrx-example.component.ts
@@ -6,6 +6,7 @@ import { selectResponse } from './selector';
 @Component({
   selector: 'app-ngrx-example',
   templateUrl: './ngrx-example.component.html',
+  styleUrls: ['./ngrx-example.component.css'],
 })
 export class NgrxExampleComponent {
   loadable$ = this.store.select(selectResponse);

diff --git a/projects/example-app/src/app/load.service.ts b/projects/example-app/src/app/load.service.ts
@@ -14,8 +14,7 @@ export class LoadService {
         })
       : of({
           id,
-          name:
-            'Answer to the Ultimate Question of Life, the Universe, and Everything',
+          name: 'Answer to the Ultimate Question',
         });
     return of({}).pipe(
       delay(loadingTime),