From 8b9679b93d6114e2c2ecc38ed48b3713b9f6e82a Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sun, 14 Aug 2022 05:50:26 +0300
Subject: [PATCH] fix flashes of no content on small viewports

---
 frontend/src/components/ChannelView.svelte    |  4 ++-
 .../src/components/PresenceSidebar.svelte     | 19 +++----------
 frontend/src/components/Sidebar.svelte        | 27 ++++---------------
 frontend/src/stores.js                        |  1 -
 4 files changed, 12 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/ChannelView.svelte b/frontend/src/components/ChannelView.svelte
index 6a22db9..9091ca1 100644
--- a/frontend/src/components/ChannelView.svelte
+++ b/frontend/src/components/ChannelView.svelte
@@ -2,6 +2,8 @@
     import ChannelTopBar from "./ChannelTopBar.svelte";
     import MessageInput from "./MessageInput.svelte";
     import Messages from "./Messages.svelte";
+    import { quadInOut } from "svelte/easing";
+    import { maybeFly } from "../animations";
 
     export let channel;
 </script>
@@ -17,7 +19,7 @@
     }
 </style>
 
-<div class="main-container">
+<div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
     <ChannelTopBar channel={ channel } />
     <Messages channelId="{ channel.id }" />
     <MessageInput channel={ channel } />
diff --git a/frontend/src/components/PresenceSidebar.svelte b/frontend/src/components/PresenceSidebar.svelte
index 36b990d..c17d3ea 100644
--- a/frontend/src/components/PresenceSidebar.svelte
+++ b/frontend/src/components/PresenceSidebar.svelte
@@ -6,28 +6,17 @@
 
     let pendingExit = false;
 
-    const scheduleClose = () => {
-        if ($smallViewport) {
-            $showChannelView = false;
-            pendingExit = true;
-        }
+    const close = () => {
         $showPresenceSidebar = false;
     };
-
-    const outroEnd = () => {
-        if (pendingExit) {
-            pendingExit = false;
-            $showChannelView = true;
-        }
-    };
 </script>
 
-<div class="sidebar-container" transition:maybeFly="{{ duration: 200, easing: quadInOut, x: 10 }}" on:outroend="{ outroEnd }">
+<div class="sidebar-container" in:maybeFly="{{ duration: 175, easing: quadInOut, x: 10 }}">
     <div class="top-bar">
         <span class="input-label">User List</span>
     </div>
     <div class="sidebar">
-        {#each $presenceStore as entry}
+        {#each $presenceStore as entry (entry.user.id)}
             <button class="sidebar-button">
                 <div>
                     <AtSignIcon />
@@ -36,7 +25,7 @@
             </button>
         {/each}
         {#if $smallViewport}
-            <button on:click={ scheduleClose } class="sidebar-button">
+            <button on:click={ close } class="sidebar-button">
                 <div>
                     <ArrowLeftIcon />
                 </div>
diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
index 16ba48f..be1f845 100644
--- a/frontend/src/components/Sidebar.svelte
+++ b/frontend/src/components/Sidebar.svelte
@@ -5,36 +5,20 @@
     import { channels, gatewayStatus, overlayStore, selectedChannel, showChannelView, showSidebar, smallViewport, userInfoStore } from "../stores";
     import UserTopBar from "./UserTopBar.svelte";
 
-    let pendingSelectChannel = null;
-
-    const selectChannel = (channel) => $selectedChannel = channel;
-
-    // janky code to hide the channel view during animation
-    // this will make a smooth sidebar animation on smaller viewports (such as a phone, where you switch between sidebar being active)
-    const scheduleSelectChannel = (channel) => {
+    const selectChannel = (channel) => {
         if ($smallViewport) {
-            $showChannelView = false;
-            pendingSelectChannel = channel;
             $showSidebar = false;
-        } else {
-            selectChannel(channel);
         }
-    };
 
-    const outroEnd = () => {
-        if (pendingSelectChannel) {
-            selectChannel(pendingSelectChannel);
-            pendingSelectChannel = null;
-            $showChannelView = true;
-        }
-    };
+        $selectedChannel = channel;
+    }
 </script>
 
-<div class="sidebar-container" transition:maybeFly="{{ duration: 200, easing: quadInOut, x: -10 }}" on:outroend="{ outroEnd }">
+<div class="sidebar-container" in:maybeFly="{{ duration: 175, easing: quadInOut, x: -10 }}">
     <UserTopBar />
     <div class="sidebar">
         {#each $channels as channel (channel.id)}
-            <button on:click="{ scheduleSelectChannel(channel) }" class="sidebar-button"  class:selected={ channel.id === $selectedChannel.id }>
+            <button on:click="{ selectChannel(channel) }" class="sidebar-button"  class:selected={ channel.id === $selectedChannel.id }>
                 <div>
                     <HashIcon />
                 </div>
@@ -77,5 +61,4 @@
         color: var(--purple-2);
         margin-left: auto;
     }
-
 </style>
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index e494729..5ee0fc7 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -429,7 +429,6 @@ class PresenceStore extends Store {
                 });
             }
         });
-        console.log(this.value);
         this.updated();
     }
 }