add loading gif

css/style.css

@@ -20,6 +20,7 @@ ul {
 
 ul:nth-child(1) {
   padding: 1em 1em;
+  position: absolute;
 }
 
 li:hover {
@@ -72,6 +73,7 @@ aside {
   grid-area: aside;
   overflow-y: scroll;
   margin-right: 2px solid #c3c3c3;
+  position: relative;
 }
 
 footer {
@@ -84,3 +86,14 @@ footer {
 sub {
   display: block;
 }
+
+.loading {
+  position: absolute;
+  z-index: 5;
+  display: none;
+  background-color: rgba(0, 0, 0, 0.438);
+  width: 100%;
+  height: 100%;
+  justify-items: center;
+  align-items: center;
+}

img/arrow-down.svg

@@ -1,114 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   id="Capa_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 477.175 252.15"
-   xml:space="preserve"
-   sodipodi:docname="arrow-down.svg"
-   width="477.17499"
-   height="252.14999"
-   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"><metadata
-   id="metadata41"><rdf:RDF><cc:Work
-       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
-   id="defs39" /><sodipodi:namedview
-   pagecolor="#ffffff"
-   bordercolor="#666666"
-   borderopacity="1"
-   objecttolerance="10"
-   gridtolerance="10"
-   guidetolerance="10"
-   inkscape:pageopacity="0"
-   inkscape:pageshadow="2"
-   inkscape:window-width="1920"
-   inkscape:window-height="1063"
-   id="namedview37"
-   showgrid="false"
-   fit-margin-top="0"
-   fit-margin-left="0"
-   fit-margin-right="0"
-   fit-margin-bottom="0"
-   inkscape:zoom="0.66757817"
-   inkscape:cx="144.36191"
-   inkscape:cy="217.02649"
-   inkscape:window-x="0"
-   inkscape:window-y="0"
-   inkscape:window-maximized="0"
-   inkscape:current-layer="Capa_1" />
-<g
-   id="g4"
-   transform="rotate(-90,182.3315,182.3315)">
-	<path
-   d="m 145.188,238.575 215.5,-215.5 c 5.3,-5.3 5.3,-13.8 0,-19.1 -5.3,-5.3 -13.8,-5.3 -19.1,0 l -225.1,225.1 c -5.3,5.3 -5.3,13.8 0,19.1 l 225.1,225 c 2.6,2.6 6.1,4 9.5,4 3.4,0 6.9,-1.3 9.5,-4 5.3,-5.3 5.3,-13.8 0,-19.1 z"
-   id="path2" />
-</g>
-<g
-   id="g6"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g8"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g10"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g12"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g14"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g16"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g18"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g20"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g22"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g24"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g26"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g28"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g30"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g32"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-<g
-   id="g34"
-   transform="translate(-5e-4,-112.5125)">
-</g>
-</svg>

index.php

@@ -22,6 +22,9 @@
             <ul>
 
             </ul>
+            <div class="loading">
+                <img src="img/loading.gif" alt="loading">
+            </div>
         </aside>
 
 

js/controller.js

@@ -19,8 +19,11 @@ class Controller {
 
   cloneRep(repurl) {
     var that = this;
+    var loading = document.getElementsByClassName("loading")[0];
+    loading.style.display = "grid";
     this.model.cloneRep().then(
       function (value) {
+        loading.style.removeProperty("display");
         that.redrawDirTree(that.view);
       },
       function (error) {}