Merge pull request #127 from luii/playground-update

docs(playground): 📘 use spinners instead of `loading` text
ngneat · Nov 12, 2023 · 5e23d75 · 5e23d75
2 parents c4ac3d0 + e114ec1
commit 5e23d75
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 35 deletions.
diff --git a/src/app/basic-page/todos-page.component.html b/src/app/basic-page/todos-page.component.html
@@ -12,23 +12,23 @@ <h1>Basic Example</h1>
   <h3>Signal Result</h3>
   <blockquote>
     @if (todos();as result) { @if (result.isLoading) {
-    <p>Loading</p>
+      <span class="loader"></span>
     } @if (result.isSuccess) {
-    <p>{{ result.data[0].title }}</p>
+      <p>{{ result.data[0].title }}</p>
     } @if (result.isError) {
-    <p>Error</p>
+      <p>Error</p>
     } }
   </blockquote>
 
   <h3>Observable Result</h3>
 
   <blockquote>
     @if (todosResult.result$ | async;as result) { @if (result.isLoading) {
-    <p>Loading</p>
+      <span class="loader"></span>
     } @if (result.isSuccess) {
-    <p>{{ result.data[0].title }}</p>
+      <p>{{ result.data[0].title }}</p>
     } @if (result.isError) {
-    <p>Error</p>
+      <p>Error</p>
     } }
   </blockquote>
 </div>
diff --git a/src/app/infinite-scroll-page/posts-page.component.html b/src/app/infinite-scroll-page/posts-page.component.html
@@ -15,17 +15,18 @@ <h1>Infinite Loading Example</h1>
 </div>
 
 @if (posts$ | async;as result) {
-  <p *ngIf="result.isPending">Loading...</p>
 
-  <span *ngIf="result.isError">Error: {{ result.error.message }}</span>
+  @if (result.isError) {
+    <div class="notification is-danger">
+      Error: {{ result.error.message }}
+    </div>
+  }
 
   <div class="pagination">
     <div class="pagination-list">
-      {{
-        result.isFetching && !result.isFetchingNextPage
-          ? 'Background Updating...'
-          : ''
-      }}
+      @if ((result.isFetching && !result.isFetchingNextPage) || result.isPending) {
+        <span class="loader"></span>
+      }
     </div>
     <button
       class="pagination-previous button is-primary"
@@ -34,13 +35,7 @@ <h1>Infinite Loading Example</h1>
       (click)="result.fetchPreviousPage()"
       [disabled]="!result.hasPreviousPage || result.isFetchingPreviousPage"
     >
-      {{
-        result.isFetchingPreviousPage
-          ? 'Loading more...'
-          : result.hasPreviousPage
-            ? 'Load Older'
-            : 'Nothing more to load'
-      }}
+      Load Older
     </button>
   </div>
 
@@ -75,11 +70,9 @@ <h1>Infinite Loading Example</h1>
 
   <div class="pagination">
     <div class="pagination-list">
-      {{
-        result.isFetching && !result.isFetchingNextPage
-          ? 'Background Updating...'
-          : ''
-      }}
+      @if ((result.isFetching && !result.isFetchingNextPage) || result.isPending) {
+        <span class="loader"></span>
+      }
     </div>
     <button
       queryInView
@@ -89,13 +82,7 @@ <h1>Infinite Loading Example</h1>
       (click)="result.fetchNextPage()"
       [disabled]="!result.hasNextPage || result.isFetchingNextPage"
     >
-      {{
-        result.isFetchingNextPage
-          ? 'Loading more...'
-          : result.hasNextPage
-            ? 'Load Newer'
-            : 'Nothing more to load'
-      }}
+      Load Newer
     </button>
   </div>
 }
diff --git a/src/app/intersecting-page/intersecting-page.component.html b/src/app/intersecting-page/intersecting-page.component.html
@@ -22,7 +22,7 @@ <h3>Signal Result</h3>
 
   <blockquote>
     @if(intersection(); as intersectionResult) { @if(intersectionResult.isLoading) {
-      <p>Loading</p>
+      <span class="loader"></span>
     } @if(intersectionResult.isSuccess) {
       <p>{{ intersectionResult.data }}</p>
     } @if(intersectionResult.isError) {
@@ -34,7 +34,7 @@ <h3>Observable Result</h3>
 
   <blockquote>
     @if(intersection$ | async; as intersectionResult) { @if(intersectionResult.isLoading) {
-      <p>Loading</p>
+      <span class="loader"></span>
     } @if(intersectionResult.isSuccess) {
       <p>{{ intersectionResult.data }}</p>
     } @if(intersectionResult.isError) {

diff --git a/src/app/pagination-page/pagination-page.component.html b/src/app/pagination-page/pagination-page.component.html
@@ -38,7 +38,9 @@ <h1>Pagination Example</h1>
       Previous
     </button>
     <div class="pagination-list">
-      <p>{{ projects.isFetching ? 'Loading...' : '' }}</p>
+      @if (projects.isFetching) {
+        <span class="loader"></span>
+      }
     </div>
     <button
       class="pagination-next button"

diff --git a/src/styles.scss b/src/styles.scss
@@ -1,4 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+@import "bulma";
 
 body {
   background-color: #F2F6FA;
@@ -21,4 +22,8 @@ body {
 .is-primary-button {
   background-color: #AE08E4 !important;
   color: #fff !important;
+}
+
+.loader {
+  @include loader;
 }