Improve performance of RoomContext in RoomHeader (#28574)

* Improve performance of RoomContext in RoomHeader

This allows a component to subscribe to only part of the RoomContext so they do not need to re-render on every single change

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Prettier

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-12-02 09:49:52 +00:00 committed by GitHub
parent 8619a22f57
commit b87437d439
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
56 changed files with 289 additions and 216 deletions

View file

@ -34,6 +34,7 @@ import { Layout } from "../../settings/enums/Layout";
import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
import Measured from "../views/elements/Measured";
import EmptyState from "../views/right_panel/EmptyState";
import { ScopedRoomContextProvider } from "../../contexts/ScopedRoomContext.tsx";
interface IProps {
roomId: string;
@ -273,12 +274,10 @@ class FilePanel extends React.Component<IProps, IState> {
if (this.state.timelineSet) {
return (
<RoomContext.Provider
value={{
...this.context,
timelineRenderingType: TimelineRenderingType.File,
narrow: this.state.narrow,
}}
<ScopedRoomContextProvider
{...this.context}
timelineRenderingType={TimelineRenderingType.File}
narrow={this.state.narrow}
>
<BaseCard
className="mx_FilePanel"
@ -302,16 +301,11 @@ class FilePanel extends React.Component<IProps, IState> {
layout={Layout.Group}
/>
</BaseCard>
</RoomContext.Provider>
</ScopedRoomContextProvider>
);
} else {
return (
<RoomContext.Provider
value={{
...this.context,
timelineRenderingType: TimelineRenderingType.File,
}}
>
<ScopedRoomContextProvider {...this.context} timelineRenderingType={TimelineRenderingType.File}>
<BaseCard
className="mx_FilePanel"
onClose={this.props.onClose}
@ -319,7 +313,7 @@ class FilePanel extends React.Component<IProps, IState> {
>
<Spinner />
</BaseCard>
</RoomContext.Provider>
</ScopedRoomContextProvider>
);
}
}