💄 Добавил спиннер загрузки

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",

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",

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%;