From f87077d3810a326300f403edb82a567189c1b6af Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Fri, 5 Aug 2022 05:24:45 +0300
Subject: [PATCH] move "connecting..." indicator to the sidebar to prevent
 layout shifts

---
 frontend/src/components/Main.svelte    |  7 -------
 frontend/src/components/Sidebar.svelte | 10 ++++++++--
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Main.svelte b/frontend/src/components/Main.svelte
index ebe7444..16b1f1e 100644
--- a/frontend/src/components/Main.svelte
+++ b/frontend/src/components/Main.svelte
@@ -44,13 +44,6 @@
 
 <OverlayProvider />
 
-{#if !$gatewayStatus.ready}
-    <div class="top-bar darker">
-        <CloudIcon />
-        <span class="h5 top-bar-heading">connecting...</span>
-    </div>
-{/if}
-
 <div class="flex-container">
     {#if $showSidebar || $selectedChannel.id === -1}
         <Sidebar />
diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
index 8da9e04..d2d9548 100644
--- a/frontend/src/components/Sidebar.svelte
+++ b/frontend/src/components/Sidebar.svelte
@@ -1,8 +1,8 @@
 <script>
-    import { HashIcon, PlusIcon, MoreVerticalIcon, SettingsIcon } from "svelte-feather-icons";
+    import { HashIcon, PlusIcon, MoreVerticalIcon, SettingsIcon, CloudIcon } from "svelte-feather-icons";
     import { quadInOut } from "svelte/easing";
     import { maybeFly } from "../animations";
-    import { channels, overlayStore, selectedChannel, showChannelView, showSidebar, smallViewport, userInfoStore } from "../stores";
+    import { channels, gatewayStatus, overlayStore, selectedChannel, showChannelView, showSidebar, smallViewport, userInfoStore } from "../stores";
     import UserTopBar from "./UserTopBar.svelte";
 
     let pendingSelectChannel = null;
@@ -64,6 +64,12 @@
             <span>Settings</span>
         </button>
     </div>
+    {#if !$gatewayStatus.ready}
+        <div class="top-bar darker">
+            <CloudIcon />
+            <span class="h5 top-bar-heading">connecting...</span>
+        </div>
+    {/if}
 </div>
 
 <style>