From 0f0ba4c7258c86d7614f5046ffcf19b50e7ee486 Mon Sep 17 00:00:00 2001
From: Pax1601 <d.passoni92@gmail.com>
Date: Wed, 10 Jan 2024 11:29:18 +0100
Subject: [PATCH] Added spinner when starting Olympus

---
 manager/javascripts/dcsinstance.js | 3 +++
 manager/javascripts/instances.js   | 2 ++
 manager/stylesheets/style.css      | 7 +++++++
 3 files changed, 12 insertions(+)

diff --git a/manager/javascripts/dcsinstance.js b/manager/javascripts/dcsinstance.js
index 77e5416d..715be367 100644
--- a/manager/javascripts/dcsinstance.js
+++ b/manager/javascripts/dcsinstance.js
@@ -147,6 +147,9 @@ class DCSInstance {
                             instanceDiv.querySelector(".button.edit").classList.toggle("hide", this.webserverOnline)
                             instanceDiv.querySelector(".button.open-browser").classList.toggle("hide", !this.webserverOnline)
                             instanceDiv.querySelector(".button.stop").classList.toggle("hide", !this.webserverOnline)
+
+                            if (this.webserverOnline) 
+                                instanceDiv.querySelector(".button.start").classList.remove("loading")
                         }
                     }
                 }
diff --git a/manager/javascripts/instances.js b/manager/javascripts/instances.js
index b10b522f..aa149fe8 100644
--- a/manager/javascripts/instances.js
+++ b/manager/javascripts/instances.js
@@ -61,10 +61,12 @@ class InstancesPage extends ManagerPage {
     }
 
     async onStartServerClicked(e) {
+        e.target.closest(".collapse").classList.add("loading");
         this.getClickedInstance(e).then((instance) => instance.startServer());
     }
 
     async onStartClientClicked(e) {
+        e.target.closest(".collapse").classList.add("loading");
         this.getClickedInstance(e).then(instance => instance.startClient());
     }
 
diff --git a/manager/stylesheets/style.css b/manager/stylesheets/style.css
index 2fced801..b83e9deb 100644
--- a/manager/stylesheets/style.css
+++ b/manager/stylesheets/style.css
@@ -311,6 +311,8 @@ input {
     width: 100%;
     text-align: left;
     padding: 15px 0px !important;
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
 }
 
 #popup .footer {
@@ -482,6 +484,11 @@ input {
     background-position: 50% 50%;
 }
 
+.button.collapse.loading::after {
+    background-image: url("../icons/spinner-solid.svg");
+    animation: rotate 2s linear infinite;
+}
+
 .button.collapse>div {
     display: none;
     position: absolute;