diff --git a/src/components/right/Profile.tsx b/src/components/right/Profile.tsx index d17c8a742..546554650 100644 --- a/src/components/right/Profile.tsx +++ b/src/components/right/Profile.tsx @@ -263,7 +263,7 @@ const Profile: FC = ({ } else if (!viewportIds) { renderingDelay = SLIDE_TRANSITION_DURATION; } - const canRenderContents = useAsyncRendering([chatId, resultType], renderingDelay); + const canRenderContent = useAsyncRendering([chatId, resultType], renderingDelay); function getMemberContextAction(memberId: string) { return memberId === currentUserId || !canDeleteMembers ? undefined : [{ @@ -275,9 +275,9 @@ const Profile: FC = ({ }]; } - function renderSharedMedia() { - if (!viewportIds || !canRenderContents || !chatMessages) { - const noSpinner = isFirstTab && !canRenderContents; + function renderContent() { + if (!viewportIds || !canRenderContent || !chatMessages) { + const noSpinner = isFirstTab && !canRenderContent; return (
@@ -422,10 +422,10 @@ const Profile: FC = ({ ref={containerRef} className="Profile custom-scroll" itemSelector={buildInfiniteScrollItemSelector(resultType)} - items={canRenderContents ? viewportIds : undefined} + items={canRenderContent ? viewportIds : undefined} cacheBuster={cacheBuster} sensitiveArea={PROFILE_SENSITIVE_AREA} - preloadBackwards={canRenderContents ? (resultType === 'members' ? MEMBERS_SLICE : SHARED_MEDIA_SLICE) : 0} + preloadBackwards={canRenderContent ? (resultType === 'members' ? MEMBERS_SLICE : SHARED_MEDIA_SLICE) : 0} // To prevent scroll jumps caused by reordering member list noScrollRestoreOnTop noFastList @@ -447,7 +447,7 @@ const Profile: FC = ({ onStart={applyTransitionFix} onStop={handleTransitionStop} > - {renderSharedMedia} + {renderContent}
diff --git a/src/components/right/RightColumn.tsx b/src/components/right/RightColumn.tsx index 49ff71d8b..724b0cd96 100644 --- a/src/components/right/RightColumn.tsx +++ b/src/components/right/RightColumn.tsx @@ -16,8 +16,8 @@ import { } from '../../modules/selectors'; import useLayoutEffectWithPrevDeps from '../../hooks/useLayoutEffectWithPrevDeps'; import useWindowSize from '../../hooks/useWindowSize'; -import useCurrentOrPrev from '../../hooks/useCurrentOrPrev'; import useHistoryBack from '../../hooks/useHistoryBack'; +import useCurrentOrPrev from '../../hooks/useCurrentOrPrev'; import RightHeader from './RightHeader'; import Profile from './Profile'; @@ -41,7 +41,7 @@ type StateProps = { nextManagementScreen?: ManagementScreens; }; -const COLUMN_CLOSE_DELAY_MS = 300; +const CLOSE_ANIMATION_DURATION = 300; const MAIN_SCREENS_COUNT = Object.keys(RightColumnContent).length / 2; const MANAGEMENT_SCREENS_COUNT = Object.keys(ManagementScreens).length / 2; @@ -194,7 +194,7 @@ const RightColumn: FC = ({ useEffect(() => { setTimeout(() => { setShouldSkipTransition(!isOpen); - }, COLUMN_CLOSE_DELAY_MS); + }, CLOSE_ANIMATION_DURATION); }, [isOpen]); useEffect(() => { @@ -239,9 +239,10 @@ const RightColumn: FC = ({ case RightColumnContent.AddingMembers: return ( ); @@ -261,13 +262,14 @@ const RightColumn: FC = ({ case RightColumnContent.Management: return ( );