refactor(devtools): add a demo resource to the demo app

Add a demo resource for testing purposes.

devtools/cypress/integration/view-component-metadata.e2e.js

@@ -57,7 +57,7 @@ describe('Viewing component metadata', () => {
 
     it('should display correct set of properties', () => {
       cy.contains('.mat-accordion-content#Properties', 'Properties');
-      cy.contains('.mat-accordion-content#Properties mat-tree-node:first span:first', 'elementRef');
+      cy.contains('.mat-accordion-content#Properties mat-tree-node:first span:first', 'demoRsrc');
       cy.contains('.mat-accordion-content#Properties mat-tree-node:last span:first', 'zippy');
     });
   });

devtools/src/app/demo-app/demo-app.component.html

@@ -9,3 +9,4 @@
 <div *appStructural>Test Structural Directive</div>
 <app-sample-properties></app-sample-properties>
 <app-cookies />
+<p>Resource value: {{ demoRsrc.value() }}</p>

devtools/src/app/demo-app/demo-app.component.ts

@@ -12,10 +12,12 @@ import {
   computed,
   CUSTOM_ELEMENTS_SCHEMA,
   Directive,
+  effect,
   ElementRef,
   inject,
   input,
   output,
+  resource,
   signal,
   TemplateRef,
   viewChild,
@@ -79,6 +81,11 @@ export class DemoAppComponent {
     return {...original, age: original.age + 1};
   });
 
+  demoRsrc = resource({
+    defaultValue: 'default_value',
+    loader: () => new Promise((res) => setTimeout(() => res('loaded_value'), 5000)),
+  });
+
   getTitle(): '► Click to expand' | '▼ Click to collapse' {
     if (!this.zippy() || !this.zippy()?.visible) {
       return '► Click to expand';
@@ -90,5 +97,9 @@ export class DemoAppComponent {
     afterRenderEffect(() => {
       this.zippy();
     });
+
+    effect(() => {
+      this.demoRsrc.isLoading();
+    });
   }
 }