[Backport staging] Load RTE component only when needed (#9807)

Use react lazy to load rte component

(cherry picked from commit d6e447b934)

Co-authored-by: Florian Duros <florianduros@element.io>
This commit is contained in:
ElementRobot 2022-12-21 10:04:11 +00:00 committed by GitHub
parent bf57a12ba4
commit 0f34702b35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 92 additions and 28 deletions

View file

@ -64,13 +64,35 @@ describe("EditWysiwygComposer", () => {
);
};
it("Should not render the component when not ready", async () => {
// When
const { rerender } = customRender(false);
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"), {
timeout: 2000,
});
rerender(
<MatrixClientContext.Provider value={mockClient}>
<RoomContext.Provider value={{ ...defaultRoomContext, room: undefined }}>
<EditWysiwygComposer disabled={false} editorStateTransfer={editorStateTransfer} />
</RoomContext.Provider>
</MatrixClientContext.Provider>,
);
// Then
await waitFor(() => expect(screen.queryByRole("textbox")).toBeNull());
});
describe("Initialize with content", () => {
it("Should initialize useWysiwyg with html content", async () => {
// When
customRender(false, editorStateTransfer);
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
// Then
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"), {
timeout: 2000,
});
await waitFor(() =>
expect(screen.getByRole("textbox")).toContainHTML(mockEvent.getContent()["formatted_body"]),
);