fix(ui): restrict changing playtime in live without file, remove unnec /channel calls and add loader

frontend/app/components/Session/Player/LivePlayer/Timeline.tsx

@@ -95,11 +95,10 @@ function Timeline(props: IProps) {
 
   const loadAndSeek = async (e: React.MouseEvent<HTMLDivElement>) => {
     e.persist();
-    await player.toggleTimetravel();
-
-    setTimeout(() => {
+    const result = await player.toggleTimetravel();
+    if (result) {
       seekProgress(e);
-    });
+    }
   };
 
   const jumpToTime = (e: React.MouseEvent<HTMLDivElement>) => {

frontend/app/components/shared/SharePopup/SharePopup.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
-import { Icon, Button, Popover } from 'UI';
+import { Icon, Button, Popover, Loader } from 'UI';
 import styles from './sharePopup.module.css';
 import IntegrateSlackButton from '../IntegrateSlackButton/IntegrateSlackButton';
 import SessionCopyLink from './SessionCopyLink';
@@ -29,7 +29,8 @@ export default class SharePopup extends React.PureComponent {
     loadingTeams: false,
   };
 
-  componentDidMount() {
+  componentDidUpdate() {
+    if (this.state.isOpen) {
       if (this.props.channels.size === 0) {
         this.props.fetchSlack();
       }
@@ -37,6 +38,7 @@ export default class SharePopup extends React.PureComponent {
         this.props.fetchTeams();
       }
     }
+  }
 
   editMessage = (e) => this.setState({ comment: e.target.value });
   shareToSlack = () => {
@@ -76,7 +78,10 @@ export default class SharePopup extends React.PureComponent {
   };
 
   handleSuccess = (endpoint) => {
-    const obj = endpoint === 'Slack' ? { isOpen: false, comment: '', loadingSlack: false } : { isOpen: false, comment: '', loadingTeams: false }
+    const obj =
+      endpoint === 'Slack'
+        ? { isOpen: false, comment: '', loadingSlack: false }
+        : { isOpen: false, comment: '', loadingTeams: false };
     this.setState(obj);
     toast.success(`Sent to ${endpoint}.`);
   };
@@ -103,8 +108,14 @@ export default class SharePopup extends React.PureComponent {
 
     return (
       <Popover
+        onOpen={() => this.setState({ isOpen: true })}
+        onClose={() => this.setState({ isOpen: false })}
         render={() => (
           <div className={styles.wrapper}>
+            {this.state.loadingTeams || this.state.loadingSlack ? (
+              <Loader loading />
+            ) :(
+              <>
                 <div className={styles.header}>
                   <div className={cn(styles.title, 'text-lg')}>
                     Share this session link to Slack/MS Teams
@@ -138,7 +149,12 @@ export default class SharePopup extends React.PureComponent {
                             {this.state.channelId && (
                               <Button onClick={this.shareToSlack} variant="primary">
                                 <div className="flex items-center">
-                              <Icon name="integrations/slack-bw" color="white" size="18" marginRight="10" />
+                                  <Icon
+                                    name="integrations/slack-bw"
+                                    color="white"
+                                    size="18"
+                                    marginRight="10"
+                                  />
                                   {loadingSlack ? 'Sending...' : 'Send'}
                                 </div>
                               </Button>
@@ -192,6 +208,8 @@ export default class SharePopup extends React.PureComponent {
                     )}
                   </>
                 )}
+              </>
+            )}
           </div>
         )}
       >

frontend/app/components/ui/Popover/Popover.tsx

@@ -21,14 +21,17 @@ interface Props {
   placement?: Placement;
   children: JSX.Element;
   onOpen?: () => void;
+  onClose?: () => void;
 }
 
-const Popover = ({ children, render, placement, onOpen = () => {} }: Props) => {
+const Popover = ({ children, render, placement, onOpen, onClose }: Props) => {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
     if (open) {
-      onOpen();
+      onOpen?.();
+    } else {
+      onClose?.();
     }
   }, [open]);
 

frontend/app/player/web/WebLivePlayer.ts

@@ -47,6 +47,7 @@ export default class WebLivePlayer extends WebPlayer {
     if (this.wpState.get().liveTimeTravel) {
       return
     }
+    let result = false;
     this.historyFileIsLoading = true
     this.messageManager.setMessagesLoading(true) // do it in one place. update unique  loading states each time instead
     this.messageManager.resetMessageManagers()
@@ -60,6 +61,7 @@ export default class WebLivePlayer extends WebPlayer {
       this.wpState.update({
         liveTimeTravel: true,
       })
+      result = true
       // here we need to update also lists state, if we gonna use them this.messageManager.onFileReadSuccess
     } catch(e) {
       toast.error('Error requesting a session file')
@@ -74,6 +76,7 @@ export default class WebLivePlayer extends WebPlayer {
 
     this.historyFileIsLoading = false
     this.messageManager.setMessagesLoading(false)
+    return result;
   }
 
   jumpToLive = () => {