How do I properly manage data state with RXJS? | Angular Community | Page 1

I have a page that fetches data, and displays three different stages depending on how the fetching does: loading, the actual data display, and an error display. This is how it's done: https://paste.ofcode.org/ZQXkyab8SRKz3mcr6g798J
I don't like the nesting of the loading and the error state (and especially not having to define some "really loading" component like this). Is there a way for me to more easily determine what state to use, or is there a way to decouple the states so it's more readable?

HTML:

<div class="flex-grow" *ngIf="this.serverList$ | async as serverListResult; else serverListLoading">
    ...
</div>

...

<ng-template #serverListLoading>
    <div class="pt-10 text-center">
        <ng-container *ngIf="this.serverListError$ | async as serverListError; else serverListReallyLoading">
            <div class="block font-medium line-clamp-1 text-yellow-600 dark:text-yellow-500">
                <h1>There was an error fetching the server list. Please try again later.</h1>
                <p>{{serverListError}}</p>
            </div>
        </ng-container>
        <ng-template #serverListReallyLoading>
            <span class="text-gray-800 dark:text-gray-200">
                <app-ellipsis-loading></app-ellipsis-loading>
            </span>
        </ng-template>
    </div>
</ng-template>

#How do I properly manage data state with RXJS?