diff --git a/src/components/LoadingComponent.tsx b/src/components/LoadingComponent.tsx
new file mode 100644
index 0000000..3c9495e
--- /dev/null
+++ b/src/components/LoadingComponent.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { FunctionComponent } from 'react';
+import { Context } from '../context/context';
+import { LoadingState } from '../models/LoadingState';
+import { getColorByBrightness } from '../util/ColorUtil';
+import CircularPanel from './CircularPanel';
+
+const LoadingComponent: FunctionComponent<{ context: Context, loadingState: LoadingState<any> }> = ({ context, loadingState }) => {
+    if (loadingState.isUnset() || loadingState.isLoaded()) {
+        return <></>
+    }
+    if (loadingState.isLoading() || loadingState.isError()) {
+        const textColorOnBoard = getColorByBrightness(
+            context.themeManager.theme.boardColor,
+            context.themeManager.theme.textColor,
+            context.themeManager.theme.textLightColor
+        );
+        const text = loadingState.isLoading() ? context.texts.Loading +"..." : loadingState.errorMessage;
+        return (
+            <CircularPanel color={context.themeManager.theme.boardColor}>
+                <h4 style={{ margin: "0", color: textColorOnBoard }}>{`${text}`}</h4>
+            </CircularPanel>
+        );
+    }
+    return <></>
+}
+
+export default LoadingComponent;
\ No newline at end of file
diff --git a/src/const/texts.ts b/src/const/texts.ts
index b9b1133..ac2de91 100644
--- a/src/const/texts.ts
+++ b/src/const/texts.ts
@@ -22,6 +22,8 @@ export type Texts = {
     PleaseWait : string,
     GameDraw : string,
     Anonymous: string,
+    GameNotFound: string,
+    Loading: string,
 }
 
 export const EnUs: Texts = {
@@ -47,6 +49,8 @@ export const EnUs: Texts = {
     PleaseWait : "Please Wait",
     GameDraw : "Draw",
     Anonymous: "Anonymous",
+    GameNotFound: "Game Not Found",
+    Loading: "Loading",
 }
 
 export const TrTr: Texts = {
@@ -71,5 +75,7 @@ export const TrTr: Texts = {
     SearchingOpponent: "Rakip Aranıyor",
     PleaseWait: "Lütfen Bekleyin",
     GameDraw : "Berabere",
-    Anonymous: "Anonim"
+    Anonymous: "Anonim",
+    GameNotFound: "Oyun Bulunamadı",
+    Loading: "Yükleniyor",
 }
\ No newline at end of file
diff --git a/src/models/LoadingState.tsx b/src/models/LoadingState.tsx
new file mode 100644
index 0000000..dfe1e4e
--- /dev/null
+++ b/src/models/LoadingState.tsx
@@ -0,0 +1,46 @@
+export type LoadingStateType = "unset" | "loading" | "loaded" | "error";
+
+export class LoadingState<T> {
+    state: LoadingStateType;
+
+    errorMessage?: string;
+
+    value?: T;
+
+    constructor(props: { state?: LoadingStateType, errorMessage?: string, value?: T }) {
+        this.state = props.state ? props.state : "unset";
+        this.errorMessage = props.errorMessage;
+        this.value = props.value;
+    }
+
+    public static Unset<T>() {
+        return new LoadingState<T>({ state: "unset" });
+    }
+
+    public static Loading<T>() {
+        return new LoadingState<T>({ state: "loading" });
+    }
+
+    public static Error<T>(props: { errorMessage: string }) {
+        const { errorMessage } = props;
+        return new LoadingState<T>({ state: "error", errorMessage });
+    }
+
+    public static Loaded<T>(props: { value?: T }) {
+        const { value } = props;
+        return new LoadingState<T>({ state: "loaded", value });
+    }
+
+    public isUnset() : boolean {
+        return this.state === "unset";
+    }
+    public isLoading() : boolean {
+        return this.state === "loading";
+    }
+    public isError() : boolean {
+        return this.state === "error";
+    }
+    public isLoaded() : boolean {
+        return this.state === "loaded";
+    }
+}
\ No newline at end of file