Add loading and effect for changing file path

pheditor.php

@@ -396,6 +396,52 @@ h1, h1 a, h1 a:hover {
     right: 10px;
     cursor: pointer;
 }
+#loading {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9;
+    display: none;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.5);
+}
+.lds-ring {
+    margin: 0 auto;
+    position: relative;
+    width: 64px;
+    height: 64px;
+    top: 45%;
+}
+.lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 51px;
+    height: 51px;
+    margin: 6px;
+    border: 6px solid #fff;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #fff transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
 </style>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
@@ -701,6 +747,8 @@ $(function(){
                 var file = $("a[data-file='" + hash + "']");
 
                 if (file.length > 0) {
+                    $("#loading").fadeIn(250);
+
                     $.post("<?=$_SERVER['PHP_SELF']?>", { action: "open", file: encodeURIComponent(hash) }, function(data){
                         editor.setValue(data);
 
@@ -715,8 +763,10 @@ $(function(){
                         }
 
                         $("#editor").attr("data-file", hash);
-                        $("#path").html(hash);
+                        $("#path").html(hash).hide().fadeIn(250);
                         $(".dropdown").find(".save, .delete, .rename, .reopen, .close").removeClass("disabled");
+
+                        $("#loading").fadeOut(250);
                     });
                 }
             }
@@ -808,6 +858,14 @@ $(function(){
         <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
             <div class="card">
                 <div class="card-block">
+                    <div id="loading">
+                        <div class="lds-ring">
+                            <div></div>
+                            <div></div>
+                            <div></div>
+                            <div></div>
+                        </div>
+                    </div>
                     <textarea id="editor" data-file="" class="form-control"></textarea>
                 </div>
             </div>