I did something

frontend/.env

@@ -0,0 +1 @@
+VUE_APP_API_BASE_URL=http://tw-cl-api.herokuapp.com/api

frontend/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.21.0",
     "core-js": "^3.6.5",
+    "sass-loader": "^10.1.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

frontend/public/index.html

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
       <style>
           *{
               box-sizing: border-box;

frontend/src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="app">
 
+    <Loader v-if="$store.state.isLoading"></Loader>
+
+
     <div class="image-zoomer" v-if="$store.state.zoomedImage">
       <span @click="closeZoomedImage()" class="image-close-icon">
         <i class="fas fa-times"></i>
@@ -18,6 +21,7 @@
 
     <router-view></router-view>
 
+
     <div class="right-section" v-if="$store.state.userId">
       <div class="search-box">
         <label for="asd" class="search-icon"><i class="fas fa-search"></i></label>
@@ -47,6 +51,8 @@ import MiniUserProfile from "@/components/MiniUserProfile";
 import AddTweetPopup from "@/components/AddTweetPopup";
 import ActionButton from "@/components/ActionButton";
 import EditProfilePopup from "@/components/EditProfilePopup";
+import Loader from "@/components/Loader";
+// import axios from "axios";
 
 export default {
   mixins:[methodsMixin],
@@ -55,7 +61,8 @@ export default {
     MiniUserProfile,
     AddTweetPopup,
     ActionButton,
-    EditProfilePopup
+    EditProfilePopup,
+    Loader
 },
   methods:{
     searchInputFocusEvent(){
@@ -71,6 +78,7 @@ export default {
     }
   },
   created() {
+      console.log(process.env)
       console.log('app created')
       this.getTweetPage()
       this.getCurrentUser()
@@ -114,6 +122,7 @@ console.log(solution(948))
 
 // The solution of a problem that comes to mind :)
 
+
  */
 
 

frontend/src/components/Loader.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="loader-root">
+    <div class="loader">
+      <div class="bar"></div>
+      <div class="bar"></div>
+      <div class="bar"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+
+.loader-root {
+  background: rgba(30, 30, 30, 0.6);
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999999;
+  position: absolute;
+}
+
+.loader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.loader .bar {
+  width: 10px;
+  height: 5px;
+  background: #1A91DA;
+  margin: 2px;
+  animation: bar 1s infinite linear;
+}
+
+.loader .bar:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.loader .bar:nth-child(2) {
+  animation-delay: 0.25s;
+}
+
+.loader .bar:nth-child(3) {
+  animation-delay: 0.5s;
+}
+
+@keyframes bar {
+  0% {
+    transform: scaleY(1) scaleX(0.5);
+  }
+
+  50% {
+    transform: scaleY(10) scaleX(1);
+  }
+
+  100% {
+    transform: scaleY(1) scaleX(0.5);
+  }
+}
+
+
+</style>

frontend/src/components/Sidebar.vue

@@ -15,6 +15,7 @@
     <TwitterButton click-event="openAddTweetPopup" class="tb" h="54px" w="240px" br="27px" text="Tweet" bgType="blue"></TwitterButton>
     <TwitterButton click-event="openAddTweetPopup" h="60px" w="60px" br="30px" bg-type="blue" class="media-query-btn" text="<i class='fas fa-feather-alt'></i>"></TwitterButton>
 
+
     <div @click="toggleLogoutDiv()" class="current-user-mini-profile">
 
       <div @click.stop="logout()" v-if="logoutDiv" class="logout">