ChatPane: clean up, switch to the other side in RTL

src/features/chats/components/chat-pane/chat-pane.tsx

@@ -80,7 +80,7 @@ const ChatPane = () => {
   // Active chat
   if (screen === ChatWidgetScreens.CHAT || screen === ChatWidgetScreens.CHAT_SETTINGS) {
     return (
-      <Pane isOpen={isOpen} index={0} main>
+      <Pane isOpen={isOpen}>
         <ChatWindow />
       </Pane>
     );
@@ -88,7 +88,7 @@ const ChatPane = () => {
 
   if (screen === ChatWidgetScreens.SEARCH) {
     return (
-      <Pane isOpen={isOpen} index={0} main>
+      <Pane isOpen={isOpen}>
         <ChatSearchHeader />
 
         {isOpen ? <ChatSearch /> : null}
@@ -97,7 +97,7 @@ const ChatPane = () => {
   }
 
   return (
-    <Pane isOpen={isOpen} index={0} main>
+    <Pane isOpen={isOpen}>
       <ChatPaneHeader
         title={<FormattedMessage id='column.chats' defaultMessage='Chats' />}
         unreadCount={unreadChatsCount}

src/features/chats/components/ui/pane.tsx

@@ -4,25 +4,18 @@ import React from 'react';
 interface IPane {
   /** Whether the pane is open or minimized. */
   isOpen: boolean;
-  /** Positions the pane on the screen, with 0 at the right. */
-  index: number;
   /** Children to display in the pane. */
   children: React.ReactNode;
-  /** Whether this is the main chat pane. */
-  main?: boolean;
 }
 
 /** Chat pane UI component for desktop. */
-const Pane: React.FC<IPane> = ({ isOpen = false, index, children, main = false }) => {
-  const right = (404 * index) + 20;
-
+const Pane: React.FC<IPane> = ({ isOpen = false, children }) => {
   return (
     <div
-      className={clsx('fixed bottom-0 right-1 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl dark:bg-gray-900', {
+      className={clsx('fixed bottom-0 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl ltr:right-5 rtl:left-5 dark:bg-gray-900', {
         'h-[550px] max-h-[100vh]': isOpen,
         'h-16': !isOpen,
       })}
-      style={{ right: `${right}px` }}
       data-testid='pane'
     >
       {children}

src/features/ui/index.tsx

@@ -505,7 +505,9 @@ const UI: React.FC<IUI> = ({ children }) => {
 
           {me && features.chats && (
             <div className='hidden xl:block'>
-              <ChatWidget />
+              <Suspense fallback={<div className='fixed bottom-0 z-[99] flex h-16 w-96 animate-pulse flex-col rounded-t-lg bg-white shadow-3xl ltr:right-5 rtl:left-5 dark:bg-gray-900' />}>
+                <ChatWidget />
+              </Suspense>
             </div>
           )}