My mobile app features an angularJs/firebase list that takes a few seconds to load. To provide a better user experience, I want to display a simple "List is loading..." message until the items have loaded.
I understand that using ng-hide/ng-show methods will be necessary, but I'm unsure of what expression to use. The list is within one div, while the "Loading..." text is in another. How can I ensure that the "Loading..." div hides only once the list has been populated?
While I acknowledge that this may not be the most efficient approach, it seems straightforward as I just need to hide one element and show another. This method seems more reliable compared to using a timeout function, which can sometimes be unpredictable. With this solution, users will be informed that the list is still loading without any confusion.
It's worth noting that my app is built on the ionic framework, hence the ion-content tags.
<ion-content id="content">
<div class="" ng-hide="loaded">
"Loading...."
</div>
<ion-list show-delete="data.showDelete"
show-reorder="data.showReorder" ng-model="loaded">
<ion-item ng-repeat="client in clients|filter:search |orderBy:'name'"
item="client"
href="#/{{client.$id}}" class="item-remove-animate">
<h2>{{client.name}}</h2>
<h4>File #: {{client.fileNumber}}</h4>
<ion-delete-button class="ion-minus-circled"
ng-click="removeClient(client)">
</ion-delete-button>
<ion-option-button class="button-assertive"
ng-click="edit(client)">
Edit
</ion-option-button>
<ion-option-button class="button-calm"
ng-click="share(client)">
Share
</ion-option-button>
<ion-reorder-button class="ion-navicon" on-reorder=
"moveItem(client, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>