Choose customer would refresh while fetching customers.

bookie/angular.json

@@ -32,7 +32,9 @@
                 "input": "public"
               }
             ],
-            "styles": ["src/styles.sass"],
+            "styles": [
+              "src/styles.sass"
+            ],
             "allowedCommonJsDependencies": [
               "typed-function",
               "javascript-natural-sort",
@@ -46,8 +48,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "1000kb",
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -86,14 +88,19 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         }
       }
     }
   },
   "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"],
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ],
     "analytics": false
   },
   "schematics": {

bookie/src/app/sales/choose-customer/choose-customer.component.html

@@ -1,8 +1,3 @@
-@if (customersResource.isLoading()) {
-  <app-skeleton-loader type="card" [count]="1" />
-} @else if (customersResource.error()) {
-  <app-error-state (retryAction)="customersResource.reload()" />
-} @else {
 <h2 mat-dialog-title>Customer</h2>
 <mat-dialog-content>
   <form class="flex-col">
@@ -60,4 +55,3 @@
   <button mat-button [mat-dialog-close]="false">Cancel</button>
   <button type="button" mat-raised-button color="primary" (click)="save()">Select</button>
 </mat-dialog-actions>
-}

bookie/src/app/sales/choose-customer/choose-customer.component.ts

@@ -13,8 +13,6 @@ import { MatInputModule } from '@angular/material/input';
 import { Customer } from '../../core/customer';
 import { CustomerDiscount } from '../../core/customer-discount';
 import { CustomerService } from '../../customers/customer.service';
-import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
-import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 
 export interface ChooseCustomerFormData {
   id: string;
@@ -40,8 +38,6 @@ export interface ChooseCustomerFormData {
     MatOptionModule,
     PercentPipe,
     FormField,
-    ErrorStateComponent,
-    SkeletonLoaderComponent,
   ],
 })
 export class ChooseCustomerComponent {
@@ -66,7 +62,8 @@ export class ChooseCustomerComponent {
   form = form(this.formModel);
 
   phoneSignal = computed(() => {
-    return this.formModel().phone;
+    const p = this.formModel().phone;
+    return typeof p === 'string' ? p.trim() : null;
   });
 
   debouncedPhone = debounced(this.phoneSignal, 150);