How can I retain text spacing for a brief interval when I change one icon to another using ng-show?

Asked Dec 26 '13 at 12:05

Active Dec 26 '13 at 12:10

Viewed 64 times

I have the following code:

<div class="fa-bar">
     <i data-ng-show="pLoading.length == 0" class="fa fa-bars"></i>
     <i data-ng-show="pLoading.length != 0" class="fa fa-spin fa-spinner"></i>
     <span>Admin</span>
</div>

When the loading.length is 0 then I show some horizontal bars, when it changes to be non zero it changes to a spinner.

The code works but for a short time I see a brief flash where neither icon show. At that time the word Admin moves to the left.

Is there a way I could make it so the Admin word always stays in the same position even for that short time when no icon is being displayed. Also is there an alternative that would be better than my using two <i> elements and two ng-show?

edited Dec 26 '13 at 12:10

Gopal Joshi

2,350
22
49

asked Dec 26 '13 at 12:05

Samantha J T Star

30,952
84
245
427

Can you post a plunker showing the issue? – Michal Charemza Dec 26 '13 at 12:41
Could remove one `` and use `ng-class` instead of `ng-show` so icon element is always there – charlietfl Dec 26 '13 at 13:24

How can I retain text spacing for a brief interval when I change one icon to another using ng-show?

0 Answers0