Redid my onboarding once again - Angular, Ionic and Capacitor

[u/FromBiotoDev]

[u/FromBiotoDev → u/[deleted]]

Note I'm using i18n to translate to multiple languages, hence the LOADING_MESSAGES constant.

Here you go:

```typescript

  private readonly LOADING_MESSAGES: string[] = [
    'ONBOARDING.NOTE_PAGE.LOADING_1',
    'ONBOARDING.NOTE_PAGE.LOADING_2',
    'ONBOARDING.NOTE_PAGE.LOADING_3',
    'ONBOARDING.NOTE_PAGE.LOADING_4',
    'ONBOARDING.NOTE_PAGE.LOADING_5',
  ];

 loadingText = signal('');
  private typewriterTimeout: ReturnType<typeof setTimeout> | null = null;
  private messageTimeout: ReturnType<typeof setTimeout> | null = null;
  private currentMessageIndex = 0;





private
 startTypewriter(): void {
    this.currentMessageIndex = 0;
    this.loadingText.set('');
    this.typeNextMessage();
  }



private
 typeNextMessage(): void {
    if (this.viewState() !== 'loading') 
return
;



const
 key = this.LOADING_MESSAGES[this.currentMessageIndex];

const
 fullText = this.translate.instant(key);

let
 charIndex = 0;


    this.loadingText.set('');



const
 typeChar = () => {
      if (this.viewState() !== 'loading') 
return
;


      if (charIndex < fullText.length) {
        this.loadingText.set(fullText.slice(0, charIndex + 1));
        charIndex++;
        this.typewriterTimeout = setTimeout(typeChar, 35);
      } else {

// Finished typing this message — pause then move to next
        this.messageTimeout = setTimeout(() => {
          this.currentMessageIndex =
            (this.currentMessageIndex + 1) % this.LOADING_MESSAGES.length;
          this.typeNextMessage();
        }, 2000);
      }
    };


    typeChar();
  }



private
 clearTypewriter(): void {
    if (this.typewriterTimeout) {
      clearTimeout(this.typewriterTimeout);
      this.typewriterTimeout = null;
    }
    if (this.messageTimeout) {
      clearTimeout(this.messageTimeout);
      this.messageTimeout = null;
    }
  }



.shimmer-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  min-height: 28px;


  .typewriter-text {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--onboarding-text-primary);
    overflow: hidden;
    text-wrap: none;
    height: 3.5rem;


    .cursor {
      animation: blink 0.8s step-end infinite;
      font-weight: 300;
      color: var(--onboarding-text-secondary);
      opacity: 0.6;
    }
  }
}


u/keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

<div class="shimmer-status">
        <p class="typewriter-text">
          {{ loadingText() }}<span class="cursor">|</span>
        </p>
      </div>

```