wip component

mon-pix/app/components/pages/campaigns/results-loader.gjs

@@ -2,19 +2,64 @@ import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { gt } from 'ember-truth-helpers';
 
 export default class ResultsLoader extends Component {
   @service router;
+  @tracked steps = 1;
 
+  constructor(...args) {
+    super(...args);
+    const interval = setInterval(() => {
+      this.steps++;
+      if (this.steps === 3) {
+        clearInterval(interval);
+      }
+    }, 1200);
+  }
+
+  get isButtonDisabled() {
+    return this.steps < 3;
+  }
   @action
   onClick() {
     this.router.replaceWith('campaigns.assessment.skill-review', this.args.code);
   }
 
   <template>
     <main role="main">
-      Loading...
-      <button {{on "click" this.onClick}}>Continuer</button>
+      <Line>
+        Calcul des scores par compétences...
+      </Line>
+      {{#if (gt this.steps 1)}}
+        <Line>
+          Identification des formations utiles...
+        </Line>
+      {{/if}}
+      {{#if (gt this.steps 2)}}
+        <Line>
+          Attribution des récompenses...
+        </Line>
+      {{/if}}
+
+      <button disabled={{this.isButtonDisabled}} {{on "click" this.onClick}}>Continuer</button>
     </main>
   </template>
 }
+
+class Line extends Component {
+  @tracked isIconDisplayed = false;
+
+  constructor(...args) {
+    super(...args);
+    setTimeout(() => (this.isIconDisplayed = true), 300);
+  }
+
+  <template>
+    {{#if this.isIconDisplayed}}
+      <span>O</span>
+    {{/if}}
+    {{yield}}
+  </template>
+}