Merge pull request #1 from angular-experts-io/refine/todo-skeleton-visuals

Refine/todo skeleton visuals

Author: tomastrajan

projects/showcase/src/app/feature/example/basic/basic.component.ts

@@ -1,15 +1,23 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; // Removed inject
+import { CommonModule } from '@angular/common';
 import { MatFormField, MatInput } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
-import { restResource } from '@angular-experts/resource';
-
+import { restResource } from '@angular-experts/resource'; // Added back
 import { Todo } from '../../../model/todo.model';
 import { TodoItemComponent } from '../../../ui/todo-item/todo-item.component';
 import { TodoSkeletonComponent } from '../../../ui/todo-skeleton/todo-skeleton.component';
 
 @Component({
   selector: 'showcase-basic',
-  imports: [MatInput, MatFormField, TodoItemComponent, TodoSkeletonComponent],
+  imports: [
+    CommonModule,
+    MatInput,
+    MatFormField,
+    TodoItemComponent,
+    TodoSkeletonComponent,
+    MatProgressSpinnerModule,
+  ],
   template: `
     <h2>Basic</h2>
     <div class="mt-8 flex flex-col gap-8">
@@ -24,22 +32,32 @@ import { TodoSkeletonComponent } from '../../../ui/todo-skeleton/todo-skeleton.c
             [value]="newTodo()"
             (input)="newTodo.set(todoDescriptionInputRef.value)"
             (keyup.enter)="createTodo()"
+            [disabled]="todos.loading()"
           />
         </mat-form-field>
 
-        <div class="flex flex-col gap-4">
+        <div class="relative flex flex-col gap-4">
+          <!-- Spinner for non-initial loads -->
+          @if (todos.loading() && !todos.loadingInitial()) {
+            <div class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-50 z-10">
+              <mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
+            </div>
+          }
+
           @if (todos.loadingInitial()) {
             <showcase-todo-skeleton [repeat]="4" />
           } @else {
             @for (todo of todos.values(); track todo.id) {
               <showcase-todo-item
-                [disabled]="todos.loading()"
+                [disabled]="todos.loading() && !todos.loadingInitial()"
                 [todo]="todo"
                 (toggle)="handleToggle(todo)"
                 (remove)="handleRemove(todo)"
               />
             } @empty {
-              <span>No todos found, create some...</span>
+              @if (!todos.loadingInitial()) {
+                <span>No todos found, create some...</span>
+              }
             }
           }
         </div>
@@ -54,27 +72,26 @@ import { TodoSkeletonComponent } from '../../../ui/todo-skeleton/todo-skeleton.c
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BasicComponent {
-  todos = restResource<Todo, string>('todos', {
+  todos = restResource<Todo, string>('todos', { // Added back local restResource
     create: {
       strategy: 'incremental'
     }
   });
-
   newTodo = signal('');
 
   createTodo() {
-    const newTodo = this.newTodo();
-    if (newTodo.length > 0) {
-      this.todos.create({ description: newTodo, completed: false });
+    const newTodoValue = this.newTodo();
+    if (newTodoValue.length > 0) {
+      this.todos.create({ description: newTodoValue, completed: false }); // Changed to todos.create
     }
     this.newTodo.set('');
   }
 
   handleToggle(todo: Todo) {
-    this.todos.update({ ...todo, completed: !todo.completed });
+    this.todos.update({ ...todo, completed: !todo.completed }); // Changed to todos.update
   }
 
   handleRemove(todo: Todo) {
-    this.todos.remove(todo);
+    this.todos.remove(todo); // Changed to todos.remove
   }
 }

projects/showcase/src/app/ui/todo-skeleton/todo-skeleton.component.ts

@@ -2,17 +2,39 @@ import {
   ChangeDetectionStrategy,
   Component,
   input,
-  Input,
 } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
   selector: 'showcase-todo-skeleton',
-  imports: [],
-  template: ` <p>todo-skeleton works!</p> `,
+  imports: [CommonModule, MatCardModule],
+  template: `
+    @for (_ of [].constructor(repeat()); track $index) {
+      <mat-card class="mb-4 p-4">
+        <div class="animate-pulse flex items-center justify-between w-full">
+          <!-- Left part: Placeholder for checkbox/icon and description -->
+          <div class="flex items-center gap-3 w-full">
+            <!-- Checkbox placeholder -->
+            <div class="h-6 w-6 bg-gray-300 rounded"></div>
+            <!-- Description placeholder -->
+            <div class="h-4 bg-gray-300 rounded w-3/4"></div>
+          </div>
+          <!-- Right part: Placeholders for two icon buttons -->
+          <div class="flex items-center gap-2">
+            <div class="h-8 w-8 bg-gray-300 rounded-full"></div> <!-- Placeholder for edit icon button -->
+            <div class="h-8 w-8 bg-gray-300 rounded-full"></div> <!-- Placeholder for delete icon button -->
+          </div>
+        </div>
+      </mat-card>
+    }
+  `,
   styles: `
     :host {
       display: block;
+      width: 100%; /* Ensure it takes full width available */
     }
+    /* Tailwind will be used for inline classes, but if specific :host styling is needed, it goes here */
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })