diff --git a/.gitignore b/.gitignore
index 86f9d46..8f0c44f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,6 @@ node_modules
 firebase.json
 
 .env
+
+.fake
+.ionide
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index fe21375..d12ed10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10335,6 +10335,7 @@
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
       "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
       "dev": true,
+      "optional": true,
       "requires": {
         "chalk": "^4.1.0",
         "hash-sum": "^2.0.0",
@@ -10346,6 +10347,7 @@
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
+          "optional": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
@@ -10355,6 +10357,7 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
           "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -10365,6 +10368,7 @@
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
+          "optional": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -10373,19 +10377,22 @@
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "loader-utils": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
           "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
           "dev": true,
+          "optional": true,
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -10397,6 +10404,7 @@
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
+          "optional": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 7585cf8..b1dcebc 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -1,22 +1,27 @@
 <template>
   <div class="train-table">
-    <div class="no-trains" v-if="computedTrains.length == 0">
+    <div class="no-trains" v-if="computedTrains.length == 0 && timetableLoaded">
       {{ $t("trains.no-trains") }}
     </div>
 
+    <div
+      class="no-trains"
+      v-if="computedTrains.length == 0 && !timetableLoaded"
+    >
+      {{ $t("trains.loading") }}
+    </div>
+
     <ul class="train-list">
       <li
         class="train-row"
         v-for="(train, i) in computedTrains"
         :key="i"
-        :id="train.timetableData.timetableId"
-        :ref="train.timetableData.timetableId"
+        :id="train.driverId + train.trainNo"
       >
+        <!-- :ref="train.timetableData.timetableId" -->
         <span class="wrapper">
-          <span
-            class="info"
-            @click="changeScheduleShowState(train.timetableData.timetableId)"
-          >
+          <span class="info" v-if="train.timetableData">
+            <!-- @click="changeScheduleShowState(train.timetableData.timetableId)" -->
             <div class="info-main">
               <div class="info-top">
                 <div class="top-category">
@@ -152,6 +157,7 @@
         </span>
 
         <TrainSchedule
+          v-if="train.timetableData"
           :followingStops="train.timetableData.followingStops"
           :currentStationName="train.currentStationName"
           @click="changeScheduleShowState(train.timetableData.timetableId)"
@@ -169,12 +175,14 @@ import Train from "@/scripts/interfaces/Train";
 
 import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
 import TrainStop from "@/scripts/interfaces/TrainStop";
+import { DataStatus } from "@/scripts/enums/DataStatus";
 
 @Component({
   components: { TrainSchedule },
 })
 export default class TrainTable extends Vue {
   @Prop() computedTrains!: Train[];
+  @Prop() timetableDataStatus!: DataStatus;
 
   showedSchedule = 0;
 
@@ -194,6 +202,14 @@ export default class TrainTable extends Vue {
   signalIcon: string = require("@/assets/icon-signal.svg");
   routeIcon: string = require("@/assets/icon-route.svg");
 
+  get timetableLoaded() {
+    return this.timetableDataStatus == DataStatus.Loaded;
+  }
+
+  get timetableError() {
+    return this.timetableDataStatus == DataStatus.Error;
+  }
+
   focusOnTrain(timetableId: number) {
     const currentEl: HTMLElement = this.$refs[timetableId][0];
 
diff --git a/src/lang/en.json b/src/lang/en.json
index 5b3c51d..605adc6 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -88,6 +88,7 @@
   },
   "trains": {
     "no-trains": "Oops! No trains online!",
+    "loading": "Loading train data...",
     "stats": "TRAFFIC STATISTICS",
     "stats-speed": "TRAINS SPEED (MIN | AVG | MAX) [km/h]",
     "stats-length": "TIMETABLES LENGTH (MIN | AVG | MAX) [km]",
diff --git a/src/lang/pl.json b/src/lang/pl.json
index 402e6aa..57ce490 100644
--- a/src/lang/pl.json
+++ b/src/lang/pl.json
@@ -88,6 +88,7 @@
   },
   "trains": {
     "no-trains": "Brak pociągów online!",
+    "loading": "Pobieranie danych o pociągach...",
     "stats": "STATYSTYKI RUCHU",
     "stats-speed": "PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]",
     "stats-length": "DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]",
diff --git a/src/scripts/enums/DataStatus.ts b/src/scripts/enums/DataStatus.ts
index 1d527e1..75b1d6a 100644
--- a/src/scripts/enums/DataStatus.ts
+++ b/src/scripts/enums/DataStatus.ts
@@ -1,8 +1,6 @@
-const enum DataStatus {
+export const enum DataStatus {
   Initialized = -1,
   Loading = 0,
   Error = 1,
   Loaded = 2
 }
-
-export default DataStatus;
diff --git a/src/scripts/interfaces/StoreData.ts b/src/scripts/interfaces/StoreData.ts
index a9347cf..0668656 100644
--- a/src/scripts/interfaces/StoreData.ts
+++ b/src/scripts/interfaces/StoreData.ts
@@ -1,4 +1,4 @@
-import DataStatus from "../enums/DataStatus";
+import { DataStatus } from "../enums/DataStatus";
 import Station from "./Station";
 import Train from "./Train";
 
diff --git a/src/store/store.ts b/src/store/store.ts
index 2c2876a..bbad70a 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -8,7 +8,7 @@ import Train from "@/scripts/interfaces/Train";
 import TrainStop from "@/scripts/interfaces/TrainStop";
 
 import utils from "@/scripts/utils/storeUtils";
-import DataStatus from "@/scripts/enums/DataStatus";
+import { DataStatus } from "@/scripts/enums/DataStatus";
 import { StoreData } from "@/scripts/interfaces/StoreData";
 
 interface TimetableData {
@@ -59,7 +59,7 @@ export default class Store extends VuexModule {
 
   private dataConnectionStatus: DataStatus = DataStatus.Loading;
   private sceneryDataStatus: DataStatus = DataStatus.Loading;
-  private timetableLoaded: DataStatus = DataStatus.Loading;
+  private timetableDataStatus: DataStatus = DataStatus.Loading;
 
   private stationList: Station[] = [];
   private trainList: Train[] = [];
@@ -74,7 +74,7 @@ export default class Store extends VuexModule {
       activeStationCount: this.stationCount,
 
       dataConnectionStatus: this.dataConnectionStatus,
-      timetableDataStatus: this.timetableLoaded
+      timetableDataStatus: this.timetableDataStatus
     };
   }
 
@@ -87,12 +87,13 @@ export default class Store extends VuexModule {
   }
 
   get getTimetableDataStatus() {
-    return this.timetableLoaded;
+    return this.timetableDataStatus;
   }
 
   get getDataStatus() {
     return this.dataConnectionStatus;
   }
+
   get getSceneryDataStatus() {
     return this.sceneryDataStatus;
   }
@@ -481,17 +482,15 @@ export default class Store extends VuexModule {
     this.trainList = this.trainList.reduce((acc, train) => {
       const timetableData = timetableList.find(data => data && data.trainNo === train.trainNo);
 
-      if (timetableData) {
-        const trainData = this.stationList
-          .find(station => station.stationName === train.currentStationName)
-          ?.scheduledTrains.find(stationTrain => stationTrain.trainNo === train.trainNo);
+      const trainStopData = this.stationList
+        .find(station => station.stationName === train.currentStationName)
+        ?.scheduledTrains.find(stationTrain => stationTrain.trainNo === train.trainNo);
 
-        acc.push({ ...train, timetableData, stopStatus: trainData?.stopStatus || "", stopLabel: trainData?.stopLabel || "" });
-      }
+      acc.push({ ...train, timetableData, stopStatus: trainStopData?.stopStatus || "", stopLabel: trainStopData?.stopLabel || "" });
 
       return acc;
     }, [] as Train[]);
 
-    this.timetableLoaded = DataStatus.Loaded;
+    this.timetableDataStatus = DataStatus.Loaded;
   }
 }
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index 5b3820c..91a9503 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -33,7 +33,7 @@ import Station from "@/scripts/interfaces/Station";
 import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
 import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
 import { StoreData } from "@/scripts/interfaces/StoreData";
-import DataStatus from "@/scripts/enums/DataStatus";
+import { DataStatus } from "@/scripts/enums/DataStatus";
 import ActionButton from "@/components/Global/ActionButton.vue";
 
 @Component({
diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue
index 034efc5..817ff42 100644
--- a/src/views/StationsView.vue
+++ b/src/views/StationsView.vue
@@ -74,7 +74,7 @@ import FilterCard from "@/components/StationsView/FilterCard.vue";
 import DonationModal from "@/components/Global/DonationModal.vue";
 import ActionButton from "@/components/Global/ActionButton.vue";
 import { StoreData } from "@/scripts/interfaces/StoreData";
-import DataStatus from "@/scripts/enums/DataStatus";
+import { DataStatus } from "@/scripts/enums/DataStatus";
 
 @Component({
   components: {
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index d52dbd3..152082c 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -19,7 +19,10 @@
         />
       </div>
 
-      <TrainTable :computedTrains="computedTrains" />
+      <TrainTable
+        :computedTrains="computedTrains"
+        :timetableDataStatus="timetableDataStatus"
+      />
     </div>
   </section>
 </template>
@@ -35,6 +38,7 @@ import TrainTable from "@/components/TrainsView/TrainTable.vue";
 import TrainStats from "@/components/TrainsView/TrainStats.vue";
 import TrainOptions from "@/components/TrainsView/TrainOptions.vue";
 import ActionButton from "@/components/Global/ActionButton.vue";
+import { DataStatus } from "@/scripts/enums/DataStatus";
 
 @Component({
   components: {
@@ -46,6 +50,7 @@ import ActionButton from "@/components/Global/ActionButton.vue";
 })
 export default class TrainsView extends Vue {
   @Getter("getTrainList") trains!: Train[];
+  @Getter("getTimetableDataStatus") timetableDataStatus!: DataStatus;
 
   // Passed in route as query parameters
   @Prop() readonly queryTrain!: string;
@@ -76,50 +81,54 @@ export default class TrainsView extends Vue {
   }
 
   get computedTrains() {
-    return this.trains
-      .filter(
-        (train) =>
-          train.timetableData &&
-          (this.searchedTrain.length > 0
-            ? train.trainNo.toString().includes(this.searchedTrain)
-            : true) &&
-          (this.searchedDriver.length > 0
-            ? train.driverName
-                .toLowerCase()
-                .includes(this.searchedDriver.toLowerCase())
-            : true)
-      )
-      .sort((a, b) => {
-        switch (this.sorterActive.id) {
-          case "mass":
-            if (a.mass > b.mass) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
+    return this.timetableDataStatus != DataStatus.Loaded
+      ? []
+      : this.trains
+          .filter(
+            (train) =>
+              train.online &&
+              (this.searchedTrain.length > 0
+                ? train.trainNo.toString().includes(this.searchedTrain)
+                : true) &&
+              (this.searchedDriver.length > 0
+                ? train.driverName
+                    .toLowerCase()
+                    .includes(this.searchedDriver.toLowerCase())
+                : true)
+          )
+          .sort((a, b) => {
+            switch (this.sorterActive.id) {
+              case "mass":
+                if (a.mass > b.mass) return this.sorterActive.dir;
+                return -this.sorterActive.dir;
 
-          case "distance":
-            if (!a.timetableData || !b.timetableData) return 0;
+              case "distance":
+                if (
+                  (a.timetableData?.routeDistance || -1) >
+                  (b.timetableData?.routeDistance || -1)
+                )
+                  return this.sorterActive.dir;
 
-            if (a.timetableData.routeDistance > b.timetableData.routeDistance)
-              return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
+                return -this.sorterActive.dir;
 
-          case "speed":
-            if (a.speed > b.speed) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
+              case "speed":
+                if (a.speed > b.speed) return this.sorterActive.dir;
+                return -this.sorterActive.dir;
 
-          case "timetable":
-            if (a.trainNo > b.trainNo) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
+              case "timetable":
+                if (a.trainNo > b.trainNo) return this.sorterActive.dir;
+                return -this.sorterActive.dir;
 
-          case "length":
-            if (a.length > b.length) return this.sorterActive.dir;
-            else return -this.sorterActive.dir;
+              case "length":
+                if (a.length > b.length) return this.sorterActive.dir;
+                return -this.sorterActive.dir;
 
-          default:
-            break;
-        }
+              default:
+                break;
+            }
 
-        return 0;
-      });
+            return 0;
+          });
   }
 }
 </script>