feat(map): add better loading styling and default map position

Author: yarl

src/components/main/map/map.html

@@ -24,11 +24,19 @@
 <div class="container" layout="column" layout-align="space-between stretch" flex>
   <md-content layout="row" layout-align="start stretch" flex>
     <div class="list" layout="column" layout-align="start stretch" flex="none">
+      <div class="list__loading" layout="column" layout-align="center center"
+          ng-if="$ctrl.map.center.zoom <= 12">
+        <h4 class="md-title">Zoom in</h4>
+      </div>
+      <div class="list__loading" layout="column" layout-align="center center"
+          ng-if="$ctrl.loading">
+        <md-progress-linear md-mode="indeterminate"></md-progress-linear>
+      </div>
+      <div class="list__loading" layout="column" layout-align="center center"
+          ng-if="$ctrl.map.center.zoom > 12 && !$ctrl.loading && !$ctrl.list.length">
+        <h4 class="md-title">No results</h4>
+      </div>
       <md-virtual-repeat-container class="list__container" flex>
-        <md-list-item>
-          <span ng-if="!$ctrl.loading">{{$ctrl.list.length}} results</span>
-          <span ng-if="$ctrl.loading">Loading...</span>
-        </md-list-item>
         <md-list-item class="md-2-line"
                       md-virtual-repeat="item in $ctrl.list | orderBy: 'name.value'"
                       ui-sref="main.object({id: item.name.value_id.substring(1)})">
@@ -40,26 +48,6 @@
             <p class="muted">{{item.admin.value}}</p>
           </div>
         </md-list-item>
-        <md-list-item class="md-2-line" ng-if="$ctrl.loading">
-          <div class="list__image" layout="row" layout-align="center center"></div>
-          <div class="md-list-item-text" layout="column"></div>
-        </md-list-item>
-        <md-list-item class="md-2-line" ng-if="$ctrl.loading">
-          <div class="list__image" layout="row" layout-align="center center"></div>
-          <div class="md-list-item-text" layout="column"></div>
-        </md-list-item>
-        <md-list-item class="md-2-line" ng-if="$ctrl.loading">
-          <div class="list__image" layout="row" layout-align="center center"></div>
-          <div class="md-list-item-text" layout="column"></div>
-        </md-list-item>
-        <md-list-item class="md-2-line" ng-if="$ctrl.loading">
-          <div class="list__image" layout="row" layout-align="center center"></div>
-          <div class="md-list-item-text" layout="column"></div>
-        </md-list-item>
-        <md-list-item class="md-2-line" ng-if="$ctrl.loading">
-          <div class="list__image" layout="row" layout-align="center center"></div>
-          <div class="md-list-item-text" layout="column"></div>
-        </md-list-item>
       </md-virtual-repeat-container>
     </div>
     <div class="list__map" flex>

src/components/main/map/map.js

@@ -10,11 +10,12 @@ function controller($location, $scope, $state, $stateParams, $timeout, leafletDa
   // bindings
 
   vm.goToItem = item => setMap(item);
-  vm.map = mapService.getMapInstance({ center: { lat: 51.686, lng: 19.545, zoom: 7 } });
+  vm.map = mapService.getMapInstance({ center: { lat: 49.4967, lng: 12.4805, zoom: 4 } });
   vm.querySearch = text => wikidata.getSearch(text);
   vm.list = [];
   vm.listParams = {};
-  vm.loading = vm.loadingMap = true;
+  vm.loading = false;
+  vm.loadingMap = true;
   vm.search = {};
 
   // activate

src/components/main/map/map.scss

@@ -3,6 +3,7 @@
 
 mo-map {
     .list {
+        position: relative;
         width: 450px;
         height: calc(100vh - 105px);
     }
@@ -15,6 +16,34 @@ mo-map {
         }
     }
 
+    .list__loading {
+        position: absolute;
+        z-index: 10;
+        width: 100%;
+        height: 100%;
+        background: rgba(250,250,250,.8);
+        padding: 20px;
+
+        md-progress-linear {
+            max-width: 200px;
+        }
+        
+        &.ng-enter {
+            transition: 0.3s linear all;
+            opacity: 0;
+        }
+        &.ng-enter.ng-enter-active {
+            opacity: 1;
+        }
+        &.ng-leave {
+            transition: 0.3s linear all;
+            opacity: 1;
+        }
+        &.ng-leave.ng-leave-active {
+            opacity: 0;
+        }
+    }
+
     .list__image {
         width: 75px;
         min-width: 75px;