From ed2c6b8a1afc0094892dcd7f09b41a379075edfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Z=C3=A1le=C5=A1=C3=A1k?= <dz@pixx.cz>
Date: Tue, 22 Dec 2020 18:37:02 +0100
Subject: [PATCH] add loading gif

---
 css/style.css      |  15 +++++-
 img/arrow-down.svg | 114 ---------------------------------------------
 img/loading.gif    | Bin 0 -> 7620 bytes
 index.php          |   3 ++
 js/controller.js   |   3 ++
 5 files changed, 20 insertions(+), 115 deletions(-)
 delete mode 100644 img/arrow-down.svg
 create mode 100644 img/loading.gif

diff --git a/css/style.css b/css/style.css
index 8849789..12b2185 100644
--- a/css/style.css
+++ b/css/style.css
@@ -20,6 +20,7 @@ ul {
 
 ul:nth-child(1) {
   padding: 1em 1em;
+  position: absolute;
 }
 
 li:hover {
@@ -39,7 +40,7 @@ li::before {
 }
 
 .caret-down::before {
-  transform: rotate(90deg);  
+  transform: rotate(90deg);
 }
 .nested {
   display: none;
@@ -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;
+}
diff --git a/img/arrow-down.svg b/img/arrow-down.svg
deleted file mode 100644
index f2feed0..0000000
--- a/img/arrow-down.svg
+++ /dev/null
@@ -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>
diff --git a/img/loading.gif b/img/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..bc5497ec75ddfe2a2782017d84a537ed24a6fe2f
GIT binary patch
literal 7620
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

literal 0
HcmV?d00001

diff --git a/index.php b/index.php
index 0eb2436..ba54c66 100644
--- a/index.php
+++ b/index.php
@@ -22,6 +22,9 @@
             <ul>
 
             </ul>
+            <div class="loading">
+                <img src="img/loading.gif" alt="loading">
+            </div>
         </aside>
 
 
diff --git a/js/controller.js b/js/controller.js
index 3695e5d..f41cd83 100644
--- a/js/controller.js
+++ b/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) {}