loading при навигации по папкам

src/public/css/styles-main.css

@@ -25,6 +25,11 @@
     {
     cursor: pointer;
     }
+    
+    .b-list_folders-item.selected
+        {
+        font-weight: bold;
+        }
 
 .b-preview
     {
@@ -32,6 +37,21 @@
     overflow:auto;
     }
     
+    .b-loading {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-image: url(../img/loading.gif);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-color: #FFF;
+        /*opacity: 0.5;*/
+        z-index: 9999;
+    }
+    
 .b-foto {
     padding: 4px;
 }

src/public/js/script-main.js

@@ -2,11 +2,28 @@ $(document).ready(function(){
 
     var 
         $foldersContentWrap = $('.b-preview'),
+        $loading = $('.b-loading'),
         colorsActive = $foldersContentWrap.data('colors'),
         freeNumbers = [1,2,3,4,5],
         currentNumToSelect = {},
         hasSelectedFoto = {};
-        
+    
+    function StartLoading()
+    {
+        $loading.show();
+    }
+    
+    function StopLoading()
+    {
+        $loading.hide();
+    }
+    
+    function MarkFolderSelected($folderName)
+    {
+        $('.b-list_folders-item').removeClass('selected');
+        $folderName.addClass('selected');
+    }
+    
     function RenderFilesList(folderName, data)
     {
         // Добавляем содержимое папки:
@@ -32,6 +49,7 @@ $(document).ready(function(){
     $('.b-list_folders-item').on('click', function(){
         
         var
+            $this = $(this),
             $foldersContent = $('.b-folder-content'),
             $form = $('#load-folder-form'),
             action = $form.attr('action'),
@@ -40,24 +58,29 @@ $(document).ready(function(){
             data = {
                 folder: folderName
             };
-       
+            
         $foldersContent.hide();
        
         if ($('.b-folder-content[data-folder="' + folderName + '"]').length>0) {
             
             console.log('AAA отображаем');
             $('.b-folder-content[data-folder="' + folderName + '"]').show();
+            MarkFolderSelected($this);
             
         } else {
             
             console.log('AAA подгружаем');
             
+            StartLoading();
+            
             $.ajax(action, {
                 type: method,
                 data: data,
                 success: function(data) {
                     //console.log('AAA success', data);
+                    StopLoading();
                     RenderFilesList(folderName, data);
+                    MarkFolderSelected($this);
                 },
                 error: function(rew, status, err) {
                     console.log(status, err);                    
@@ -196,4 +219,7 @@ $(document).ready(function(){
     });        
     
 
+    // Отображаем содержимое первой папки при загрузке страницы:
+    $('.b-list_folders-item').first().click();
+
 });
\ No newline at end of file

src/templates/app/main.phtml

@@ -65,6 +65,10 @@ $dir = $this->dir;
         </div>
         <div class="b-preview col" data-colors=<?= ($colors_active ? json_encode($colors_active) : '')?>>
             
+            <div class="b-loading"></div>
+            
+            
+            
             
             
         </div>