Adding visibility to the ActivityIndicator

Author: tjvantoll

index.html

@@ -1540,7 +1540,7 @@ <h4 class="exercise-start">
 </h4>
 
 <p>Open up <code>app/pages/list/list.html</code> and paste the following line immediately before the final <code>&lt;/GridLayout&gt;</code>:</p>
-<pre><code class="lang-XML">&lt;ActivityIndicator [busy]=&quot;isLoading&quot; row=&quot;1&quot; horizontalAlignment=&quot;center&quot; verticalAlignment=&quot;center&quot;&gt;&lt;/ActivityIndicator&gt;
+<pre><code class="lang-XML">&lt;ActivityIndicator [busy]=&quot;isLoading&quot; [visibility]=&quot;isLoading ? &#39;visible&#39; : &#39;collapse&#39;&quot; row=&quot;1&quot; horizontalAlignment=&quot;center&quot; verticalAlignment=&quot;center&quot;&gt;&lt;/ActivityIndicator&gt;
 </code></pre>
 <p>This binds the ActivityIndicator’s <code>busy</code> attribute to an <code>isLoading</code> property in the <code>ListPage</code> component. To define that property, open <code>app/pages/list/list.component.ts</code> and add the following line of code immediately under <code>grocery: string = &quot;&quot;</code>:</p>
 <pre><code class="lang-TypeScript">isLoading = false;

src/chapters/chapter4.md

@@ -591,7 +591,7 @@ In NativeScript apps you can use the [ActivityIndicator](http://docs.nativescrip
 Open up `app/pages/list/list.html` and paste the following line immediately before the final `</GridLayout>`:
 
 ``` XML
-<ActivityIndicator [busy]="isLoading" row="1" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
+<ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" row="1" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
 ```
 
 This binds the ActivityIndicator’s `busy` attribute to an `isLoading` property in the `ListPage` component. To define that property, open `app/pages/list/list.component.ts` and add the following line of code immediately under `grocery: string = ""`: