Fixed loading gif

src/components/Loading/Loading.css

@@ -0,0 +1,48 @@
+@font-face {
+    font-family: 'Press Start 2P';
+    src: url('assets/fonts/PressStart2P-Regular.ttf') format('truetype');
+}
+
+.app__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+.app__container .loading__text{
+    font-family: 'Press Start 2P', cursive;
+    color: var(--colorPrimary);
+}
+
+.app__container .loading__text{
+    font-family: 'Press Start 2P', cursive;
+    color: var(--colorPrimary);
+}
+
+.loading__gif {
+    width: 15%;
+}
+
+@media screen and (max-width: 767px) {
+    .loading__gif {
+        width: 35%;
+    }
+    .poke__logo {
+        width: 35vw;
+    }
+    .filter__container {
+        display: flex;
+        flex-direction: column;
+        width: 100vw;
+        align-items: center;
+        margin: 7vh 0 5vh 0;
+        gap: 2vh 2vw;
+        justify-content: center;
+    }
+    select, .filter__items>input{
+        width: 40vw;
+    }
+
+}

src/components/Loading/Loading.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import './Loading.css';
+
 const Loading = () => {
   return (
     <div className="loading">

src/components/Loading/index.ts

@@ -0,0 +1 @@
+export { default } from './Loading';