docs(playground): 📘 change bulma-loader-mixin to loader

Author: luii

src/app/basic-page/todos-page.component.html

@@ -12,7 +12,7 @@ <h1>Basic Example</h1>
   <h3>Signal Result</h3>
   <blockquote>
     @if (todos();as result) { @if (result.isLoading) {
-      <span class="bulma-loader-mixin"></span>
+      <span class="loader"></span>
     } @if (result.isSuccess) {
       <p>{{ result.data[0].title }}</p>
     } @if (result.isError) {
@@ -24,7 +24,7 @@ <h3>Observable Result</h3>
 
   <blockquote>
     @if (todosResult.result$ | async;as result) { @if (result.isLoading) {
-      <span class="bulma-loader-mixin"></span>
+      <span class="loader"></span>
     } @if (result.isSuccess) {
       <p>{{ result.data[0].title }}</p>
     } @if (result.isError) {

src/app/infinite-scroll-page/posts-page.component.html

@@ -25,7 +25,7 @@ <h1>Infinite Loading Example</h1>
   <div class="pagination">
     <div class="pagination-list">
       @if ((result.isFetching && !result.isFetchingNextPage) || result.isPending) {
-        <span class="bulma-loader-mixin"></span>
+        <span class="loader"></span>
       }
     </div>
     <button
@@ -71,7 +71,7 @@ <h1>Infinite Loading Example</h1>
   <div class="pagination">
     <div class="pagination-list">
       @if ((result.isFetching && !result.isFetchingNextPage) || result.isPending) {
-        <span class="bulma-loader-mixin"></span>
+        <span class="loader"></span>
       }
     </div>
     <button

src/app/intersecting-page/intersecting-page.component.html

@@ -22,7 +22,7 @@ <h3>Signal Result</h3>
 
   <blockquote>
     @if(intersection(); as intersectionResult) { @if(intersectionResult.isLoading) {
-      <span class="bulma-loader-mixin"></span>
+      <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) {
-      <span class="bulma-loader-mixin"></span>
+      <span class="loader"></span>
     } @if(intersectionResult.isSuccess) {
       <p>{{ intersectionResult.data }}</p>
     } @if(intersectionResult.isError) {

src/app/pagination-page/pagination-page.component.html

@@ -39,7 +39,7 @@ <h1>Pagination Example</h1>
     </button>
     <div class="pagination-list">
       @if (projects.isFetching) {
-        <span class="bulma-loader-mixin"></span>
+        <span class="loader"></span>
       }
     </div>
     <button

src/styles.scss

@@ -24,6 +24,6 @@ body {
   color: #fff !important;
 }
 
-.bulma-loader-mixin {
+.loader {
   @include loader;
 }