Add incons and loader

Persona.html

@@ -270,12 +270,7 @@
 									<div class="col-9">
 										<div id="people_map">
 											<div id="map">
-												<div id="map_icon" class="no_info_icon">
-													<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-													<!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M408 120C408 174.6 334.9 271.9 302.8 311.1C295.1 321.6 280.9 321.6 273.2 311.1C241.1 271.9 168 174.6 168 120C168 53.73 221.7 0 288 0C354.3 0 408 53.73 408 120zM288 152C310.1 152 328 134.1 328 112C328 89.91 310.1 72 288 72C265.9 72 248 89.91 248 112C248 134.1 265.9 152 288 152zM425.6 179.8C426.1 178.6 426.6 177.4 427.1 176.1L543.1 129.7C558.9 123.4 576 135 576 152V422.8C576 432.6 570 441.4 560.9 445.1L416 503V200.4C419.5 193.5 422.7 186.7 425.6 179.8zM150.4 179.8C153.3 186.7 156.5 193.5 160 200.4V451.8L32.91 502.7C17.15 508.1 0 497.4 0 480.4V209.6C0 199.8 5.975 190.1 15.09 187.3L137.6 138.3C140 152.5 144.9 166.6 150.4 179.8H150.4zM327.8 331.1C341.7 314.6 363.5 286.3 384 255V504.3L192 449.4V255C212.5 286.3 234.3 314.6 248.2 331.1C268.7 357.6 307.3 357.6 327.8 331.1L327.8 331.1z"/>
-													</svg>
-													<p>Nessun luogo trovato</p>
-												</div>
+												<div class="loader"></div>
 											</div>
 										</div>
 									</div>
@@ -299,12 +294,7 @@
 									<div class="col-9">
 										<div id="person_map" style="background-color: #fff; min-height:300px; margin-left:15px; margin-right:15px;">
 											<div id="myWordCloud">
-												<div id="users_icon" class="no_info_icon">
-													<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-														<!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M319.9 320c57.41 0 103.1-46.56 103.1-104c0-57.44-46.54-104-103.1-104c-57.41 0-103.1 46.56-103.1 104C215.9 273.4 262.5 320 319.9 320zM369.9 352H270.1C191.6 352 128 411.7 128 485.3C128 500.1 140.7 512 156.4 512h327.2C499.3 512 512 500.1 512 485.3C512 411.7 448.4 352 369.9 352zM512 160c44.18 0 80-35.82 80-80S556.2 0 512 0c-44.18 0-80 35.82-80 80S467.8 160 512 160zM183.9 216c0-5.449 .9824-10.63 1.609-15.91C174.6 194.1 162.6 192 149.9 192H88.08C39.44 192 0 233.8 0 285.3C0 295.6 7.887 304 17.62 304h199.5C196.7 280.2 183.9 249.7 183.9 216zM128 160c44.18 0 80-35.82 80-80S172.2 0 128 0C83.82 0 48 35.82 48 80S83.82 160 128 160zM551.9 192h-61.84c-12.8 0-24.88 3.037-35.86 8.24C454.8 205.5 455.8 210.6 455.8 216c0 33.71-12.78 64.21-33.16 88h199.7C632.1 304 640 295.6 640 285.3C640 233.8 600.6 192 551.9 192z"/>
-													</svg>
-													<p>Nessuna persona trovata</p>
-												</div>
+												<div id="word_loader" class="loader"></div>
 											</div>
 										</div>
 									</div>

css/landing-page.css

@@ -436,29 +436,6 @@ table a:hover {
     text-decoration: underline;
 }
 
-.loader {
-    border: 16px solid #f3f3f3; /* Light grey */
-    border-top: 16px solid #3498db; /* Blue */
-    border-radius: 50%;
-    width: 120px;
-    height: 120px;
-    animation: spin 2s linear infinite;
-    display: none;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.show-loader {
-    display: block;
-}
-
 #info_link {
     width: 100%;
 }

js/people.js

@@ -760,10 +760,16 @@ function handle_map(json) {
   var latitude = lat/i;
   var longitude = long/i;
 
-  if (locations.length > 0) {
-    $("#map_icon").css("display", "none");
-  } else {
+  var mapIcon = "<div id='map_icon' class='no_info_icon'> \
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'> \
+  <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d='M408 120C408 174.6 334.9 271.9 302.8 311.1C295.1 321.6 280.9 321.6 273.2 311.1C241.1 271.9 168 174.6 168 120C168 53.73 221.7 0 288 0C354.3 0 408 53.73 408 120zM288 152C310.1 152 328 134.1 328 112C328 89.91 310.1 72 288 72C265.9 72 248 89.91 248 112C248 134.1 265.9 152 288 152zM425.6 179.8C426.1 178.6 426.6 177.4 427.1 176.1L543.1 129.7C558.9 123.4 576 135 576 152V422.8C576 432.6 570 441.4 560.9 445.1L416 503V200.4C419.5 193.5 422.7 186.7 425.6 179.8zM150.4 179.8C153.3 186.7 156.5 193.5 160 200.4V451.8L32.91 502.7C17.15 508.1 0 497.4 0 480.4V209.6C0 199.8 5.975 190.1 15.09 187.3L137.6 138.3C140 152.5 144.9 166.6 150.4 179.8H150.4zM327.8 331.1C341.7 314.6 363.5 286.3 384 255V504.3L192 449.4V255C212.5 286.3 234.3 314.6 248.2 331.1C268.7 357.6 307.3 357.6 327.8 331.1L327.8 331.1z'/> \
+  </svg> \
+  <p>Nessun luogo trovato</p> \
+  </div>";
+
+  if (locations.length == 0) {
     $("#references_persona").css("display", "none");
+    document.getElementById("map").innerHTML = mapIcon;
   }
 
   document.getElementById("list_places_person").innerHTML = myPlaces;
@@ -875,6 +881,7 @@ function handle_network(json) {
 
   document.getElementById("list_person_network").innerHTML = ArrayNames;
 
+  $('#myWordCloud').empty();
   /*var tot = parseInt(words[0][1]);*/
 
   for (var i in words) {
@@ -951,12 +958,19 @@ function handle_network(json) {
                   .remove();
     }
 
-    if (words.length > 0) {
-      $("#users_icon").css("display", "none");
-    } else {
+    var wordIcon = "<div id='users_icon' class='no_info_icon'> \
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'> \
+      <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d='M319.9 320c57.41 0 103.1-46.56 103.1-104c0-57.44-46.54-104-103.1-104c-57.41 0-103.1 46.56-103.1 104C215.9 273.4 262.5 320 319.9 320zM369.9 352H270.1C191.6 352 128 411.7 128 485.3C128 500.1 140.7 512 156.4 512h327.2C499.3 512 512 500.1 512 485.3C512 411.7 448.4 352 369.9 352zM512 160c44.18 0 80-35.82 80-80S556.2 0 512 0c-44.18 0-80 35.82-80 80S467.8 160 512 160zM183.9 216c0-5.449 .9824-10.63 1.609-15.91C174.6 194.1 162.6 192 149.9 192H88.08C39.44 192 0 233.8 0 285.3C0 295.6 7.887 304 17.62 304h199.5C196.7 280.2 183.9 249.7 183.9 216zM128 160c44.18 0 80-35.82 80-80S172.2 0 128 0C83.82 0 48 35.82 48 80S83.82 160 128 160zM551.9 192h-61.84c-12.8 0-24.88 3.037-35.86 8.24C454.8 205.5 455.8 210.6 455.8 216c0 33.71-12.78 64.21-33.16 88h199.7C632.1 304 640 295.6 640 285.3C640 233.8 600.6 192 551.9 192z'/> \
+    </svg> \
+    <p>Nessuna persona trovata</p> \
+    </div>";
+
+    if (words.length == 0) {
       $("#wordcloudNetwork").css("display", "none");
       $("#references_network").css("display", "none");
+      document.getElementById("myWordCloud").innerHTML = wordIcon;
     }
+
 }
 
 $(document).on("click", ".luogo", function (ev) {

js/search.js

@@ -32,6 +32,10 @@ $(document).ready(function () {
 
 	function results_retrieveData() {
 
+		$("#loader").css("display", "block");
+		$('#wb_Image1').text("");
+		$('.results').css("display", "none");
+
 		search_name = testo;
 
 		var g = document.getElementById("graph_selector");
@@ -224,7 +228,7 @@ $(document).ready(function () {
 		console.log(json); 
 
 		$('#wb_Shape1').text("");
-		$('#wb_Image1').text("");
+		$('#loader').css("display", "none");
 		$('#Man-Made_Object').text("");
 		$(".results").css("display", "block");
 		$('#n_mmo').text("");

ricerca.html

@@ -113,6 +113,7 @@
 			</div>
 		</section>
 
+		<div class="loader" id="loader" style="display:none;"></div>
 		<section id="wb_Image1">
 			<div class="container">
 				<div id="wb_intro" class="section-small">
@@ -124,9 +125,9 @@
 			</div>
 		</section>
 
+
 		<section class="w-content section-small">
 			<div class="container-fluid">
-				<div class="loader" id="loader"></div>
 
 				<!-- Scheda -->
 				<div id="myTab" class="tab"></div>