add delay for shared note true unmount

bigbluebutton-html5/imports/ui/components/notes/component.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
@@ -12,7 +12,8 @@ import NotesDropdown from '/imports/ui/components/notes/notes-dropdown/container
 
 const CHAT_CONFIG = Meteor.settings.public.chat;
 const PUBLIC_CHAT_ID = CHAT_CONFIG.public_id;
-
+const DELAY_UNMOUNT_SHARED_NOTES = Meteor.settings.public.app.delayForUnmountOfSharedNote;
+console.log(DELAY_UNMOUNT_SHARED_NOTES);
 const intlMessages = defineMessages({
   hide: {
     id: 'app.notes.hide',
@@ -47,6 +48,8 @@ const defaultProps = {
   layoutType: null,
 };
 
+let timoutRef = null;
+
 const Notes = ({
   hasPermission,
   intl,
@@ -58,18 +61,31 @@ const Notes = ({
   sidebarContent,
   sharedNotesOutput,
   amIPresenter,
+  isToSharedNotesBeShow,
 }) => {
   useEffect(() => () => Service.setLastRev(), []);
+  const [shouldRenderNotes, setShouldRenderNotes] = useState(false);
   const { isChrome } = browserInfo;
   const isOnMediaArea = area === 'media';
   const style = isOnMediaArea ? {
     position: 'absolute',
     ...sharedNotesOutput,
   } : {};
-  const isHidden = isOnMediaArea && (style.width === 0 || style.height === 0);
+  const isHidden = (isOnMediaArea && (style.width === 0 || style.height === 0))
+                   || !isToSharedNotesBeShow;
 
   if (isHidden) style.padding = 0;
-
+  console.log();
+  useEffect(() => {
+    if (isToSharedNotesBeShow) {
+      setShouldRenderNotes(true);
+      clearTimeout(timoutRef);
+    } else {
+      timoutRef = setTimeout(() => {
+        setShouldRenderNotes(false);
+      }, DELAY_UNMOUNT_SHARED_NOTES);
+    }
+  }, [isToSharedNotesBeShow]);
   useEffect(() => {
     if (
       isOnMediaArea
@@ -128,7 +144,7 @@ const Notes = ({
     ) : null;
   };
 
-  return (
+  return shouldRenderNotes && (
     <Styled.Notes data-test="notes" isChrome={isChrome} style={style}>
       {!isOnMediaArea ? (
         <Header

bigbluebutton-html5/imports/ui/components/sidebar-content/component.jsx

@@ -134,10 +134,10 @@ const SidebarContent = (props) => {
       <ErrorBoundary
         Fallback={FallbackView}
       >
-        <ChatContainer width={width}/>
+        <ChatContainer width={width} />
       </ErrorBoundary>
       )}
-      {sidebarContentPanel === PANELS.SHARED_NOTES && <NotesContainer />}
+      <NotesContainer isToSharedNotesBeShow={sidebarContentPanel === PANELS.SHARED_NOTES} />
       {sidebarContentPanel === PANELS.CAPTIONS && <CaptionsContainer />}
       {sidebarContentPanel === PANELS.BREAKOUT && <BreakoutRoomContainer />}
       {sidebarContentPanel === PANELS.WAITING_USERS && <WaitingUsersPanel />}

bigbluebutton-html5/imports/ui/components/sidebar-content/container.jsx

@@ -13,8 +13,6 @@ const SidebarContentContainer = () => {
   const { users } = usingUsersContext;
   const amIPresenter = users[Auth.meetingID][Auth.userID].presenter;
 
-  if (sidebarContentOutput.display === false) return null;
-
   return (
     <SidebarContent
       {...sidebarContentOutput}

bigbluebutton-html5/private/config/settings.yml

@@ -33,6 +33,7 @@ public:
     copyright: '©2023 BigBlueButton Inc.'
     html5ClientBuild: HTML5_CLIENT_VERSION
     helpLink: https://bigbluebutton.org/html5/
+    delayForUnmountOfSharedNote: 120000
     bbbTabletApp:
       enabled: false
       iosAppStoreUrl: 'https://apps.apple.com/us/app/bigbluebutton-tablet/id1641156756'