diff --git a/index.html b/index.html
index 01ebd05c..7e0377d1 100644
--- a/index.html
+++ b/index.html
@@ -162,14 +162,14 @@
       </g>
 
       <pattern id="oceanic" width="100" height="100" patternUnits="userSpaceOnUse">
-        <image id="oceanicPattern" href="./images/pattern1.png"></image>
+        <image id="oceanicPattern" href="./images/pattern1.png" opacity="0.2"></image>
       </pattern>
     </defs>
     <g id="viewbox"></g>
     <g id="scaleBar"></g>
     <g id="initial" opacity=1>
       <rect x="-1%" y="-1%" width="102%" height="102%" fill="#466eab"/>
-      <rect x="-1%" y="-1%" width="102%" height="102%" fill="url(#oceanic)" opacity=".2"/>
+      <rect x="-1%" y="-1%" width="102%" height="102%" fill="url(#oceanic)"/>
       <use href="#rose" id="init-rose" x="50%" y="50%"/>
     </g>
   </svg>
diff --git a/main.js b/main.js
index 50b0743b..c43ab673 100644
--- a/main.js
+++ b/main.js
@@ -192,15 +192,24 @@ if (!location.hostname) {
   d3.select("#loading-text").transition().duration(1000).style("opacity", 0);
   d3.select("#init-rose").transition().duration(4000).style("opacity", 0);
 } else {
+  hideLoading();
   checkLoadParameters();
+}
 
-  // remove loading screen
-  d3.select("#loading").transition().duration(4000).style("opacity", 0).remove();
-  d3.select("#initial").transition().duration(4000).attr("opacity", 0).remove();
+function hideLoading() {
+  d3.select("#loading").transition().duration(4000).style("opacity", 0);
+  d3.select("#initial").transition().duration(4000).attr("opacity", 0);
   d3.select("#optionsContainer").transition().duration(3000).style("opacity", 1);
   d3.select("#tooltip").transition().duration(4000).style("opacity", 1);
 }
 
+function showLoading() {
+  d3.select("#loading").transition().duration(200).style("opacity", 1);
+  d3.select("#initial").transition().duration(200).attr("opacity", 1);
+  d3.select("#optionsContainer").transition().duration(100).style("opacity", 0);
+  d3.select("#tooltip").transition().duration(200).style("opacity", 0);
+}
+
 // decide which map should be loaded or generated on page load
 function checkLoadParameters() {
   const url = new URL(window.location.href);
@@ -1921,16 +1930,18 @@ function showStatistics() {
   INFO && console.log(stats);
 }
 
-const regenerateMap = debounce(function () {
+const regenerateMap = debounce(async function () {
   WARN && console.warn("Generate new random map");
+  showLoading();
   closeDialogs("#worldConfigurator, #options3d");
   customization = 0;
-  undraw();
   resetZoom(1000);
-  generate();
+  undraw();
+  await generate();
   restoreLayers();
   if (ThreeD.options.isOn) ThreeD.redraw();
   if ($("#worldConfigurator").is(":visible")) editWorld();
+  hideLoading();
 }, 1000);
 
 // clear the map