From 01b16e072be269022b95be79d88a450b655ca52b Mon Sep 17 00:00:00 2001
From: George Schneeloch <gschneel@mit.edu>
Date: Thu, 22 Oct 2015 17:22:38 -0400
Subject: [PATCH] Implemented lazy loading for resource tab

---
 ui/static/ui/js/listing.js                | 44 +++++++++++++++++++++--
 ui/templates/includes/resource_panel.html |  2 +-
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/ui/static/ui/js/listing.js b/ui/static/ui/js/listing.js
index 4ed556a3..0bf18b0f 100644
--- a/ui/static/ui/js/listing.js
+++ b/ui/static/ui/js/listing.js
@@ -226,7 +226,7 @@ define('listing',
       var selectedFacets;
       var selectedMissingFacets;
 
-      var openResourcePanel = function(resourceId) {
+      var loadResourceTab = function(resourceId) {
         LearningResources.loader(
           repoSlug,
           resourceId,
@@ -234,11 +234,49 @@ define('listing',
           closeLearningResourcePanel,
           $("#tab-1")[0]
         );
-        $('.cd-panel').addClass('is-visible');
-        StaticAssets.loader(repoSlug, resourceId, $("#tab-3")[0]);
+      };
+
+      var loadXmlTab = function(resourceId) {
         XmlPanel.loader(repoSlug, resourceId, $("#tab-2")[0]);
       };
 
+      var loadStaticAssetsTab = function(resourceId) {
+        StaticAssets.loader(repoSlug, resourceId, $("#tab-3")[0]);
+      };
+
+      // Keep track of resource id so we can lazy load panels.
+      var currentResourceId;
+
+      var panelLoaders = {
+        "tab-1": loadResourceTab,
+        "tab-2": loadXmlTab,
+        "tab-3": loadStaticAssetsTab
+      };
+
+      var loadedPanels;
+      var openResourcePanel = function(resourceId) {
+        // Reset loaded panels
+        loadedPanels = {};
+        currentResourceId = resourceId;
+
+        // Load the resource tab
+        showTab("tab-1");
+        loadResourceTab(currentResourceId);
+        loadedPanels["tab-1"] = true;
+
+        $('.cd-panel').addClass('is-visible');
+      };
+
+      _.each(panelLoaders, function(loader, tag) {
+        $("a[href='#" + tag + "']").click(function() {
+          // If tab not already loaded, load it now
+          if (!loadedPanels[tag]) {
+            loader(currentResourceId);
+            loadedPanels[tag] = true;
+          }
+        });
+      });
+
       refreshFromAPI = function() {
         pageLoaded = false;
 
diff --git a/ui/templates/includes/resource_panel.html b/ui/templates/includes/resource_panel.html
index a463419c..18082e07 100644
--- a/ui/templates/includes/resource_panel.html
+++ b/ui/templates/includes/resource_panel.html
@@ -12,7 +12,7 @@ <h1 id="lr-title">Manage Learning Resource</h1>
           </a>
         </li>
         <li>
-          <a href="#tab-2" data-toggle="tab" aria-expanded="true">
+          <a href="#tab-2" data-toggle="tab" aria-expanded="false">
             <span class="hidden-xs">XML</span>
           </a>
         </li>