From 9110c086b61732d97b56857bfa42e06ad4e6732a Mon Sep 17 00:00:00 2001
From: Anatoly Kopyl <akopyl@radner.ru>
Date: Mon, 29 Mar 2021 02:10:21 +0300
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D1=81=D0=BF=D0=B8=D0=BD=D0=BD=D0=B5=D1=80=20?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json       | 13 ++++++++++++-
 frontend/package.json            |  3 ++-
 frontend/src/components/Game.vue | 13 +++++++++----
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5beb1ac..1894a57 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
-        "vue": "^3.0.0"
+        "vue": "^3.0.0",
+        "vue-spinner": "^1.0.4"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -13555,6 +13556,11 @@
       "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
       "dev": true
     },
+    "node_modules/vue-spinner": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/vue-spinner/-/vue-spinner-1.0.4.tgz",
+      "integrity": "sha512-GNG2F+8BLX201JT/jUX+84Gsi3ZteVQwt9K7mues3ts9FcQ95dGn7uu6a5ndSxdYYUEzfh1KngZiOE0u+l4itA=="
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.3.tgz",
@@ -26219,6 +26225,11 @@
         }
       }
     },
+    "vue-spinner": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/vue-spinner/-/vue-spinner-1.0.4.tgz",
+      "integrity": "sha512-GNG2F+8BLX201JT/jUX+84Gsi3ZteVQwt9K7mues3ts9FcQ95dGn7uu6a5ndSxdYYUEzfh1KngZiOE0u+l4itA=="
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d14e75e..ae355dd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,8 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vue-spinner": "^1.0.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/frontend/src/components/Game.vue b/frontend/src/components/Game.vue
index 31179ac..509a79c 100644
--- a/frontend/src/components/Game.vue
+++ b/frontend/src/components/Game.vue
@@ -13,9 +13,7 @@
       </transition>
     </div>
   </div>
-  <div v-else>
-    Загрузка...
-  </div>
+  <square-loader v-else :color="'#f3f3f3'" class="loader" />
 </template>
 
 <script>
@@ -23,11 +21,14 @@ import axios from 'axios'
 import List from './List.vue'
 import Result from './Result.vue'
 
+import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
+
 export default {
   name: 'Game',
   components: {
     List,
-    Result
+    Result,
+    SquareLoader
   },
   data() {
     return {
@@ -112,6 +113,10 @@ export default {
   transform: rotateY(120deg);
 }
 
+.loader {
+  margin-top: 100px;
+}
+
 @media screen and (max-width: 486px) {
   .card {
     width: 94%;