title: MeteorJS: Loading... templates sequentially
body: <p>So, essentially, I have a collection with multiple categories of photos. I currently have this setup for going through the categories and loading a template for each one: </p>
  
  <pre><code>{{#each categories}}
    {{&gt;gallery collectionName=categoryName}}
  {{/each}}
  </code></pre>
  
  <p>So, this is great for dynamically building each section using the gallery template. </p>
  
  <p>As each gallery has it's own collection of images, I have added a helper function inside the gallery template to call on the respective collection and then for each collection image, add it to the gallery. </p>
  
  <p>(inside the gallery template)</p>
  
  <pre><code>{{loadPhotos collectionName}}
  </code></pre>
  
  <p>Now, you can probably see the problem. </p>
  
  <p>The gallery divs are created first, empty, then all at once, all the photos are added to all the divs. </p>
  
  <p>I would prefer, each gallery shows a loading circle until the photos are all added, then the next gallery starts loading the photos and the loading circle disappears when all it's photos are loaded. This continues until all the categories have been loaded.</p>
  
  <p>I am using jquery to add the photos and FlowRouter if that helps...</p>
  
  <p>Thanks for your time and any solutions offered!</p>