From fda432b21b2d6b6238bfd9f9fb645dcec1020ee7 Mon Sep 17 00:00:00 2001
From: migbash <20924663+migbash@users.noreply.github.com>
Date: Tue, 12 Sep 2023 15:32:55 +0100
Subject: [PATCH] #1652: fix; feat: upgrade to single entry file;

---
 .../lobby/highlights/Highlights-Loader.svelte | 118 ++++-----
 .../loaders/CHIGH-Loader-Entry.svelte         | 234 ++++++++++++++++++
 .../loaders/CHIGH-Loader-Extra-Info.svelte    |  18 --
 .../loaders/CHIGH-Loader-JoinNow-Btn.svelte   |  17 --
 .../loaders/CHIGH-Loader-Participants.svelte  |  19 --
 .../loaders/CHIGH-Loader-Team-Box.svelte      |  18 --
 .../loaders/CHIGH-Loader-Timer-Box.svelte     |  18 --
 .../loaders/CHIGH-Loader-Timer-Start.svelte   |  17 --
 .../loaders/CHIGH-Loader-Top-Left.svelte      |  18 --
 .../loaders/CHIGH-Loader-Top-Right.svelte     |  17 --
 .../CHIGH-Loader-Tournament-Box.svelte        |  17 --
 .../CHIGH-Loader-Tournament-Info.svelte       |  18 --
 12 files changed, 282 insertions(+), 247 deletions(-)
 create mode 100644 src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Entry.svelte
 delete mode 100644 src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Extra-Info.svelte
 delete mode 100644 src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-JoinNow-Btn.svelte
 delete mode 100644 src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Participants.svelte
 delete mode 100644 src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Team-Box.svelte
 delete mode 100644 src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Timer-Box.svelte
 delete mode 100644 src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Timer-Start.svelte
 delete mode 100644 src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Top-Left.svelte
 delete mode 100644 src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Top-Right.svelte
 delete mode 100644 src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Tournament-Box.svelte
 delete mode 100644 src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Tournament-Info.svelte

diff --git a/src/lib/components/page/lobby/highlights/Highlights-Loader.svelte b/src/lib/components/page/lobby/highlights/Highlights-Loader.svelte
index a368104bd..4f15e22a4 100644
--- a/src/lib/components/page/lobby/highlights/Highlights-Loader.svelte
+++ b/src/lib/components/page/lobby/highlights/Highlights-Loader.svelte
@@ -23,16 +23,9 @@
   // ### 5. type(s) imports(s)                                            ◼️
   // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
 
-	import ChighLoaderExtraInfo from "./loaders/CHIGH-Loader-Extra-Info.svelte";
-	import ChighLoaderJoinNowBtn from "./loaders/CHIGH-Loader-JoinNow-Btn.svelte";
-	import ChighLoaderParticipants from "./loaders/CHIGH-Loader-Participants.svelte";
-	import ChighLoaderTeamBox from "./loaders/CHIGH-Loader-Team-Box.svelte";
-	import ChighLoaderTimerBox from "./loaders/CHIGH-Loader-Timer-Box.svelte";
-	import ChighLoaderTimerStart from "./loaders/CHIGH-Loader-Timer-Start.svelte";
-	import ChighLoaderTopLeft from "./loaders/CHIGH-Loader-Top-Left.svelte";
-	import ChighLoaderTopRight from "./loaders/CHIGH-Loader-Top-Right.svelte";
-	import ChighLoaderTournamentBox from "./loaders/CHIGH-Loader-Tournament-Box.svelte";
-	import ChighLoaderTournamentInfo from "./loaders/CHIGH-Loader-Tournament-Info.svelte";
+	import userBetarenaSettings from '$lib/store/user-settings.js';
+
+	import ChighLoaderEntry from "./loaders/CHIGH-Loader-Entry.svelte";
 
   // #endregion ➤ 📦 Package Imports
 
@@ -82,6 +75,7 @@
         "
         widget-component
         "
+        class:dark-background-1={$userBetarenaSettings.theme == 'Dark'}
       >
 
         <!--
@@ -95,8 +89,12 @@
           m-b-20
           "
         >
-          <ChighLoaderTopLeft />
-          <ChighLoaderTopRight />
+          <ChighLoaderEntry
+            competitionTopRightBox={true}
+          />
+          <ChighLoaderEntry
+            competitionTopLeftBox={true}
+          />
         </div>
 
         <!--
@@ -113,57 +111,39 @@
             class=
             "
             m-b-25
-            row-space-start
             "
           >
-            <div
-              class=
-              "
-              m-r-15
-              "
-            >
-              <ChighLoaderTournamentBox />
-            </div>
-            <ChighLoaderTournamentInfo />
+            <ChighLoaderEntry
+              competitionTournamentBox={true}
+            />
           </div>
 
           <!--
           FIXTURE TEAMS - LOADER
           -->
           <div
-            id="{CNAME}⮕competition-teams"
             class=
             "
             m-b-16
-            row-space-even
             "
           >
-
-            <ChighLoaderTeamBox />
-            <ChighLoaderTeamBox />
-
+            <ChighLoaderEntry
+              competitionTeamBox={true}
+            />
           </div>
 
           <!--
           FIXTURE / COMPETITION COUNTDOWN LOADER
           -->
           <div
-            id="{CNAME}⮕countdown"
             class=
             "
             m-b-24
-            row-space-out
             "
           >
-
-            <ChighLoaderTimerStart />
-
-            <div>
-              {#each { length: 3 } ?? [] as _}
-                <ChighLoaderTimerBox />
-              {/each}
-            </div>
-
+            <ChighLoaderEntry
+              competitionCountdown={true}
+            />
           </div>
 
           <!--
@@ -174,7 +154,9 @@
           >
 
             {#each { length: 4 } ?? [] as _}
-              <ChighLoaderExtraInfo />
+              <ChighLoaderEntry
+                competitionExtraInfo={true}
+              />
             {/each}
 
           </div>
@@ -191,8 +173,12 @@
           row-space-out
           "
         >
-          <ChighLoaderParticipants />
-          <ChighLoaderJoinNowBtn />
+          <ChighLoaderEntry
+            competitionParticipants={true}
+          />
+          <ChighLoaderEntry
+            competitionJoinNowBox={true}
+          />
         </div>
 
       </div>
@@ -264,26 +250,6 @@
     padding: 20px 24px;
   }
 
-  div#competition⮕w⮕highlights-loader⮕competition-teams
-  {
-    /* 📌 position */
-    position: relative;
-    /* 🎨 style */
-    overflow: hidden;
-    border-radius: 8px;
-    background-color: var(--whitev2);
-    min-height: 86px;
-  }
-
-  div#competition⮕w⮕highlights-loader⮕countdown
-  {
-    /* 🎨 style */
-    min-height: 40px;
-    border-radius: 8px;
-    background: var(--whitev2);
-    padding: 4px 4px 4px 12px;
-  }
-
   div#competition⮕w⮕highlights-loader⮕grid-details
   {
     /* 🎨 style */
@@ -301,9 +267,9 @@
   }
 
   /*
-  =============
-  ⚡️ RESPONSIVNESS
-  =============
+  ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+  ◼️ ⚡️ RESPONSIVNESS      ◼️
+  ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
   */
 
   @media only screen
@@ -354,15 +320,27 @@
 	}
 
   /*
-  =============
-  🌒 DARK-THEME
-  =============
+  ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+  ◼️ 🌒 DARK-THEME         ◼️
+  ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
   */
 
-  :global(.dark-background div#competition⮕w⮕highlights-loader⮕top-row)
+  div#competition⮕w⮕highlights-loader⮕main.dark-background-1
+  {
+    /* 🎨 style */
+    background-color: var(--dark-theme-1-4-shade) !important;
+  }
+
+  .dark-background-1 div#competition⮕w⮕highlights-loader⮕top-row
+  {
+    /* 🎨 style */
+    background-color: var(--dark-theme-1) !important;
+  }
+
+  .dark-background-1 div#competition⮕w⮕highlights-loader⮕bottom-row
   {
     /* 🎨 style */
-    background-color: var(--dark-theme-1);
+    background-color: var(--dark-theme-1) !important;
   }
 
 </style>
\ No newline at end of file
diff --git a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Entry.svelte b/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Entry.svelte
new file mode 100644
index 000000000..36284ceee
--- /dev/null
+++ b/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Entry.svelte
@@ -0,0 +1,234 @@
+<!--
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+### COMPONENT JS (w/ TS)                                                               ◼️
+### NOTE:                                                                              ◼️
+### access custom Betarena Scores JS VScode Snippets by typing 'script...'             ◼️
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+-->
+
+<script lang="ts">
+
+  // #region ➤ 📦 Package Imports
+
+  // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+  // ### NOTE:                                                            ◼️
+  // ### Please add inside 'this' region the 'imports' that are required  ◼️
+  // ### by 'this' .svelte file is ran.                                   ◼️
+  // ### IMPORTANT                                                        ◼️
+  // ### Please, structure the imports as follows:                        ◼️
+  // ### 1. svelte/sveltekit imports                                      ◼️
+  // ### 2. project-internal files and logic                              ◼️
+  // ### 3. component import(s)                                           ◼️
+  // ### 4. assets import(s)                                              ◼️
+  // ### 5. type(s) imports(s)                                            ◼️
+  // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+
+	import userBetarenaSettings from '$lib/store/user-settings.js';
+
+  // #endregion ➤ 📦 Package Imports
+
+  // #region ➤ 📌 VARIABLES
+
+  // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+  // ### NOTE:                                                            ◼️
+  // ### Please add inside 'this' region the 'variables' that are to be   ◼️
+  // ### and are expected to be used by 'this' .svelte file / component.  ◼️
+  // ### ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+
+  export let
+    competitionExtraInfo: boolean = false
+    , competitionJoinNowBox: boolean = false
+    , competitionParticipants: boolean = false
+    , competitionTeamBox: boolean = false
+    , competitionCountdown: boolean = false
+    , competitionTopLeftBox: boolean = false
+    , competitionTopRightBox: boolean = false
+    , competitionTournamentBox: boolean = false
+  ;
+
+  // #endregion ➤ 📌 VARIABLES
+
+</script>
+
+<!--
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+### COMPONENT HTML                                                                     ◼️
+### NOTE:                                                                              ◼️
+### use 'CTRL+SPACE' to autocomplete global class="" styles                            ◼️
+### NOTE:                                                                              ◼️
+### access custom Betarena Scores VScode Snippets by typing emmet-like abbrev.         ◼️
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+-->
+
+<!--
+COMPETITION ⮕ TOP-LEFT BOX
+-->
+{#if competitionTopLeftBox}
+  <svg
+    class=
+    "
+    animation-target
+    "
+    width="140"
+    height="34"
+    viewBox="0 0 140 34"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="140" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+    <rect y="18" width="83" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+  </svg>
+{/if}
+
+<!--
+COMPETITION ⮕ TOP-LEFT BOX
+-->
+{#if competitionTopRightBox}
+  <svg
+    class=
+    "
+    animation-target
+    "
+    width="53"
+    height="16"
+    viewBox="0 0 53 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="53" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+  </svg>
+{/if}
+
+<!--
+COMPETITION ⮕ TOURNAMENT BOX
+-->
+{#if competitionTournamentBox}
+  <svg
+    class=
+    "
+    animation-target
+    "
+    width="205"
+    height="34"
+    viewBox="0 0 205 34"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="51" width="154" height="16" fill="#626262"/>
+    <rect x="51" y="18" width="61" height="16" fill="#626262"/>
+    <rect width="37" height="34" fill="#626262"/>
+  </svg>
+{/if}
+
+<!--
+COMPETITION ⮕ EXTRA INFO
+-->
+{#if competitionExtraInfo}
+  <svg
+    class=
+    "
+    animation-target
+    "
+    width="120"
+    height="36"
+    viewBox="0 0 120 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="48" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #F2F2F2;'} />
+    <rect y="20" width="120" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #F2F2F2;'} />
+  </svg>
+{/if}
+
+<!--
+COMPETITION ⮕ JOIN NOW
+-->
+{#if competitionJoinNowBox}
+  <svg
+    class=
+    "
+    animation-target
+    "
+    width="97"
+    height="44"
+    viewBox="0 0 97 44"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="97" height="44" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+  </svg>
+{/if}
+
+<!--
+COMPETITION ⮕ PARTICIPANTS
+-->
+{#if competitionParticipants}
+  <svg
+    class=
+    "
+    animation-target
+    "
+    width="150"
+    height="34"
+    viewBox="0 0 150 34"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="85" width="48" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+    <rect y="1" width="72" height="31" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+    <rect x="85" y="18" width="65" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+  </svg>
+{/if}
+
+<!--
+COMPETITION ⮕ TEAM BOX
+-->
+{#if competitionTeamBox}
+  <svg
+    class=
+    "
+    animation-target
+    width-100
+    "
+    width="280"
+    height="86"
+    viewBox="0 0 280 86"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio='none'
+  >
+    <rect width="280" height="86" rx="8" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #4B4B4B;' : 'fill: #F2F2F2;'} />
+    <line x1="139.5" y1="2.18557e-08" x2="139.5" y2="25" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+    <line x1="139.5" y1="61" x2="139.5" y2="86" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+    <rect x="41" y="53" width="61" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+    <rect x="179" y="53" width="61" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+    <rect x="52" y="15" width="37" height="34" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+    <rect x="191" y="15" width="37" height="34" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
+  </svg>
+{/if}
+
+<!--
+COMPETITION ⮕ COUNTER BOX
+-->
+{#if competitionCountdown}
+  <svg
+    class=
+    "
+    animation-target
+    "
+    width="280"
+    height="40"
+    viewBox="0 0 280 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="280" height="40" rx="8" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #626262;' : 'fill: #F2F2F2;'} />
+    <path d="M92 8C92 5.79086 93.7909 4 96 4H152V36H96C93.7909 36 92 34.2091 92 32V8Z" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #626262;' : 'fill: #F2F2F2;'} />
+    <rect width="60" height="32" transform="translate(154 4)" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #626262;' : 'fill: #F2F2F2;'} />
+    <path d="M216 4H272C274.209 4 276 5.79086 276 8V32C276 34.2091 274.209 36 272 36H216V4Z" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #626262;' : 'fill: #F2F2F2;'} />
+    <rect x="11" y="12" width="61" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #626262;' : 'fill: #F2F2F2;'} />
+    <rect x="109" y="12" width="27" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #626262;' : 'fill: #F2F2F2;'} />
+    <rect x="171" y="12" width="27" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #626262;' : 'fill: #F2F2F2;'} />
+    <rect x="232" y="12" width="27" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #626262;' : 'fill: #F2F2F2;'} />
+  </svg>
+{/if}
diff --git a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Extra-Info.svelte b/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Extra-Info.svelte
deleted file mode 100644
index b514f9cfb..000000000
--- a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Extra-Info.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import userBetarenaSettings from '$lib/store/user-settings.js';
-</script>
-
-<svg
-  class=
-  "
-  animation-target
-  "
-  width="120"
-  height="36"
-  viewBox="0 0 120 36"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect width="48" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #F2F2F2;'} />
-  <rect y="20" width="120" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #F2F2F2;'} />
-</svg>
diff --git a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-JoinNow-Btn.svelte b/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-JoinNow-Btn.svelte
deleted file mode 100644
index f4621a4a5..000000000
--- a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-JoinNow-Btn.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import userBetarenaSettings from '$lib/store/user-settings.js';
-</script>
-
-<svg
-  class=
-  "
-  animation-target
-  "
-  width="97"
-  height="44"
-  viewBox="0 0 97 44"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect width="97" height="44" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
-</svg>
diff --git a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Participants.svelte b/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Participants.svelte
deleted file mode 100644
index 444a53868..000000000
--- a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Participants.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import userBetarenaSettings from '$lib/store/user-settings.js';
-</script>
-
-<svg
-  class=
-  "
-  animation-target
-  "
-  width="150"
-  height="34"
-  viewBox="0 0 150 34"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect x="85" width="48" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
-  <rect y="1" width="72" height="31" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
-  <rect x="85" y="18" width="65" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
-</svg>
diff --git a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Team-Box.svelte b/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Team-Box.svelte
deleted file mode 100644
index 765134fc6..000000000
--- a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Team-Box.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import userBetarenaSettings from '$lib/store/user-settings.js';
-</script>
-
-<svg
-  class=
-  "
-  animation-target
-  "
-  width="61"
-  height="54"
-  viewBox="0 0 61 54"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect y="38" width="61" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
-  <rect x="11" width="37" height="34" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
-</svg>
diff --git a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Timer-Box.svelte b/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Timer-Box.svelte
deleted file mode 100644
index a964ed43b..000000000
--- a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Timer-Box.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import userBetarenaSettings from '$lib/store/user-settings.js';
-</script>
-
-<svg
-  class=
-  "
-  animation-target
-  "
-  width="60"
-  height="32"
-  viewBox="0 0 60 32"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path d="M0 0H56C58.2091 0 60 1.79086 60 4V28C60 30.2091 58.2091 32 56 32H0V0Z" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #383838;' : 'fill: #FFFFFF;'} />
-  <rect x="16" y="8" width="27" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #F2F2F2;'} />
-</svg>
diff --git a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Timer-Start.svelte b/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Timer-Start.svelte
deleted file mode 100644
index 4cc446785..000000000
--- a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Timer-Start.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import userBetarenaSettings from '$lib/store/user-settings.js';
-</script>
-
-<svg
-  class=
-  "
-  animation-target
-  "
-  width="61"
-  height="16"
-  viewBox="0 0 61 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect width="61" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #F2F2F2;'}  />
-</svg>
diff --git a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Top-Left.svelte b/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Top-Left.svelte
deleted file mode 100644
index 8f45ec1c0..000000000
--- a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Top-Left.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import userBetarenaSettings from '$lib/store/user-settings.js';
-</script>
-
-<svg
-  class=
-  "
-  animation-target
-  "
-  width="140"
-  height="34"
-  viewBox="0 0 140 34"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect width="140" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
-  <rect y="18" width="83" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
-</svg>
\ No newline at end of file
diff --git a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Top-Right.svelte b/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Top-Right.svelte
deleted file mode 100644
index 7da7c1075..000000000
--- a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Top-Right.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import userBetarenaSettings from '$lib/store/user-settings.js';
-</script>
-
-<svg
-  class=
-  "
-  animation-target
-  "
-  width="53"
-  height="16"
-  viewBox="0 0 53 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect width="53" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #FFFFFF;'} />
-</svg>
diff --git a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Tournament-Box.svelte b/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Tournament-Box.svelte
deleted file mode 100644
index f15691293..000000000
--- a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Tournament-Box.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-	import userBetarenaSettings from '$lib/store/user-settings.js';
-</script>
-
-<svg
-  class=
-  "
-  animation-target
-  "
-  width="37"
-  height="34"
-  viewBox="0 0 37 34"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect width="37" height="34" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #F2F2F2;'} />
-</svg>
diff --git a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Tournament-Info.svelte b/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Tournament-Info.svelte
deleted file mode 100644
index 16a8e5fd2..000000000
--- a/src/lib/components/page/lobby/highlights/loaders/CHIGH-Loader-Tournament-Info.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script lang="ts">
-	import userBetarenaSettings from '$lib/store/user-settings.js';
-</script>
-
-<svg
-  class=
-  "
-  animation-target
-  "
-  width="154"
-  height="34"
-  viewBox="0 0 154 34"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect width="154" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #F2F2F2;'} />
-  <rect y="18" width="61" height="16" style={$userBetarenaSettings.theme == 'Dark' ? 'fill: #616161;' : 'fill: #F2F2F2;'} />
-</svg>