diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts index 92412c1128..19e82c46af 100644 --- a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts +++ b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts @@ -139,9 +139,8 @@ function useReviewPanelState(): ReviewPanelStateReactIde { const [subView, setSubView] = useState>('cur_file') - const [loading] = useScopeValue>( - 'reviewPanel.overview.loading' - ) + const [isOverviewLoading, setIsOverviewLoading] = + useState>(false) // All selected changes. If an aggregated change (insertion + deletion) is selected, the two ids // will be present. The length of this array will differ from the count below (see explanation). const selectedEntryIds = useRef([]) @@ -844,9 +843,9 @@ function useReviewPanelState(): ReviewPanelStateReactIde { if (!trackChangesVisible) { return } - setReviewPanelOpen(value => !value) + setReviewPanelOpen(!reviewPanelOpen) sendMB('rp-toggle-panel', { - value: reviewPanelOpen, + value: !reviewPanelOpen, }) }, [reviewPanelOpen, setReviewPanelOpen, trackChangesVisible]) @@ -1404,6 +1403,52 @@ function useReviewPanelState(): ReviewPanelStateReactIde { ) ) + const openSubView = useRef('cur_file') + useEffect(() => { + if (!reviewPanelOpen) { + // Always show current file when not open, but save current state + setSubView(prevState => { + openSubView.current = prevState + return 'cur_file' + }) + } else { + // Reset back to what we had when previously open + setSubView(openSubView.current) + } + handleLayoutChange({ async: true, animate: false }) + }, [reviewPanelOpen]) + + const canRefreshRanges = useRef(false) + useEffect(() => { + if (subView === 'overview' && canRefreshRanges.current) { + canRefreshRanges.current = false + + setIsOverviewLoading(true) + refreshRanges().finally(() => { + setIsOverviewLoading(false) + }) + } + }, [subView, refreshRanges]) + + const prevSubView = useRef(subView) + const initializedPrevSubView = useRef(false) + useEffect(() => { + // Prevent setting a computed value for `prevSubView` on mount + if (!initializedPrevSubView.current) { + initializedPrevSubView.current = true + return + } + prevSubView.current = subView === 'cur_file' ? 'overview' : 'cur_file' + // Allow refreshing ranges once for each `subView` change + canRefreshRanges.current = true + }, [subView]) + + useEffect(() => { + if (subView === 'cur_file' && prevSubView.current === 'overview') { + dispatchReviewPanelEvent('overview-closed', subView) + } + }, [subView]) + const values = useMemo( () => ({ collapsed, @@ -1421,7 +1466,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde { toolbarHeight, subView, wantTrackChanges, - loading, + isOverviewLoading, openDocId, lineHeight, trackChangesState, @@ -1448,7 +1493,7 @@ function useReviewPanelState(): ReviewPanelStateReactIde { toolbarHeight, subView, wantTrackChanges, - loading, + isOverviewLoading, openDocId, lineHeight, trackChangesState, diff --git a/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts b/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts index cd71fb3261..d0788525d6 100644 --- a/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts +++ b/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts @@ -1,8 +1,6 @@ import { ReactScopeValueStore } from '@/features/ide-react/scope-value-store/react-scope-value-store' export default function populateReviewPanelScope(store: ReactScopeValueStore) { - store.set('reviewPanel.overview.loading', false) - store.set('reviewPanel.nVisibleSelectedChanges', 0) store.set('users', {}) store.set('reviewPanel.layoutToLeft', false) store.set('gotoEntry', () => {}) diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/overview-container.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/overview-container.tsx index 073e9afc71..eab057f1e0 100644 --- a/services/web/frontend/js/features/source-editor/components/review-panel/overview-container.tsx +++ b/services/web/frontend/js/features/source-editor/components/review-panel/overview-container.tsx @@ -9,7 +9,7 @@ import { useFileTreeData } from '@/shared/context/file-tree-data-context' import { MainDocument } from '../../../../../../types/project-settings' function OverviewContainer() { - const { loading } = useReviewPanelValueContext() + const { isOverviewLoading } = useReviewPanelValueContext() const docs: MainDocument[] = useFileTreeData().docs return ( @@ -23,7 +23,7 @@ function OverviewContainer() { tabIndex={0} aria-labelledby="review-panel-tab-overview" > - {loading ? ( + {isOverviewLoading ? (
diff --git a/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts b/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts index d69cf39d0f..c73a1f06c6 100644 --- a/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts +++ b/services/web/frontend/js/features/source-editor/context/review-panel/hooks/use-angular-review-panel-state.ts @@ -14,9 +14,9 @@ function useAngularReviewPanelState(): ReviewPanelState { const [subView, setSubView] = useScopeValue>( 'reviewPanel.subView' ) - const [loading] = useScopeValue>( - 'reviewPanel.overview.loading' - ) + const [isOverviewLoading] = useScopeValue< + ReviewPanel.Value<'isOverviewLoading'> + >('reviewPanel.overview.loading') const [nVisibleSelectedChanges] = useScopeValue< ReviewPanel.Value<'nVisibleSelectedChanges'> >('reviewPanel.nVisibleSelectedChanges') @@ -170,7 +170,7 @@ function useAngularReviewPanelState(): ReviewPanelState { toolbarHeight, subView, wantTrackChanges, - loading, + isOverviewLoading, openDocId, lineHeight, trackChangesState, @@ -197,7 +197,7 @@ function useAngularReviewPanelState(): ReviewPanelState { toolbarHeight, subView, wantTrackChanges, - loading, + isOverviewLoading, openDocId, lineHeight, trackChangesState, diff --git a/services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts b/services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts index ec2e6f10f3..dcec002a0d 100644 --- a/services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts +++ b/services/web/frontend/js/features/source-editor/context/review-panel/types/review-panel-state.ts @@ -30,7 +30,7 @@ export interface ReviewPanelState { toolbarHeight: number subView: SubView wantTrackChanges: boolean - loading: boolean + isOverviewLoading: boolean openDocId: DocId | null lineHeight: number trackChangesState: