lanitochka17 commented 11 months ago

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Open the testing desktop app
Click on the FAB button
Click on Send message
Repeat 2-3 times

Expected Result:

Modal opens without any lags or freezes

Actual Result:

Modal freezes when it is opened / sometimes the sliding motion is neglected and it appears immediately without any sliding effect

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

[ ] Android / native
[ ] Android / Chrome
[ ] iOS / native
[ ] iOS / Safari
[ ] MacOS / Chrome / Safari
[x] MacOS / Desktop

Version Number: 1.3.78.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

https://github.com/Expensify/App/assets/78819774/39206801-5320-47fb-9d9c-2347b8476204

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01a81bbd7ec35b9394
Upwork Job ID: 1709988778512769024
Last Price Increase: 2023-11-06

melvin-bot[bot] commented 11 months ago

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

melvin-bot[bot] commented 11 months ago

Bug0 Triage Checklist (Main S/O)

[ ] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
[ ] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
[ ] This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
[ ] This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
[ ] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

melvin-bot[bot] commented 11 months ago

Job added to Upwork: https://www.upwork.com/jobs/~01a81bbd7ec35b9394

melvin-bot[bot] commented 11 months ago

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

AmjedNazzal commented 11 months ago

Is this only on staging with beta? I can't repo on dev with beta on

studentofcoding commented 11 months ago

Proposal

Please re-state the problem that we are trying to solve in this issue

On Desktop - FAB - Modal for 'Send Message' freezes when opened

What is the root cause of that problem?

The root cause of the problem is due to heavy rendering on src/pages/NewChatSelectorPage.js when the modal is opened that causing animation delay in the rendering process.

What changes do you think we should make in order to solve the problem?

We should optimize the rendering of the components in the NewChatSelectorPage modal. via lazy loading NewChatPage to load the component only when needed.

Here below is the example code, with the result

import React, {lazy} from 'react';
//.. Other codes

// Lazy load NewChatPage, so the animation is smoother and load the data after Modal is opened
const NewChatPage = lazy(() => import('./NewChatPage'));

//.. Other codes

function NewChatSelectorPage(props) {
    return (
        <ScreenWrapper
            shouldEnableKeyboardAvoidingView={false}
            includeSafeAreaPaddingBottom={false}
            shouldEnableMaxHeight
            testID={NewChatSelectorPage.displayName}
        >
            <HeaderWithBackButton title={props.translate('sidebarScreen.fabNewChat')} />
            {Permissions.canUsePolicyRooms(props.betas) ? (
                <OnyxTabNavigator
                    id={CONST.TAB.NEW_CHAT_TAB_ID}
                    tabBar={({state, navigation, position}) => (
                        <TabSelector
                            state={state}
                            navigation={navigation}
                            position={position}
                        />
                    )}
                >
                    <TopTab.Screen
                        name={CONST.TAB.NEW_CHAT}
                        component={() => (
                            //.. Use Suspense to make sure that the component is loaded
                            //.. we can use another component as the fallback as well
                            <Suspense fallback={null}>
                                <NewChatPage />
                            </Suspense>
                        )}
                    />
                    <TopTab.Screen
                        name={CONST.TAB.NEW_ROOM}
                        component={WorkspaceNewRoomPage}
                    />
                </OnyxTabNavigator>
            ) : (
                //.. Use Suspense to make sure that the component is loaded
                //.. we can use another component as the fallback as well
                <Suspense fallback={null}>
                    <NewChatPage />
                </Suspense>
            )}
        </ScreenWrapper>
    );
}

NewChatSelectorPage.propTypes = propTypes;
NewChatSelectorPage.defaultProps = defaultProps;
NewChatSelectorPage.displayName = 'NewChatPage';

export default compose(
    withLocalize,
    withWindowDimensions,
    withOnyx({
        betas: {key: ONYXKEYS.BETAS},
    }),
)(NewChatSelectorPage);

Result

https://github.com/Expensify/App/assets/20473526/c39afd56-74e8-4da1-97da-640a9f34cd30

What alternative solutions did you explore? (Optional)

NA

@eVoloshchak @lschurr

melvin-bot[bot] commented 11 months ago

@eVoloshchak, @lschurr Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

eVoloshchak commented 11 months ago

Is this only on staging with beta? I can't repo on dev with beta on

@AmjedNazzal, it is reproducible on dev on my end

https://github.com/Expensify/App/assets/9059945/ee32ec51-045c-4ed4-b4b9-459b5ab7f4df

eVoloshchak commented 11 months ago

The root cause of the problem is due to heavy rendering on src/pages/NewChatSelectorPage.js

@studentofcoding, lazy loading the component would fix the symptom of the problem, but not the root cause. What is particularly heavy about this page? What's causing those heavy renders?

studentofcoding commented 11 months ago

The root cause of the problem is due to heavy rendering on src/pages/NewChatSelectorPage.js

@studentofcoding, lazy loading the component would fix the symptom of the problem, but not the root cause.

What is particularly heavy about this page? What's causing those heavy renders?

It's on Search List that get fetch & rendered everytime we open the modal @eVoloshchak

eVoloshchak commented 11 months ago

But we don't have the same problem when opening the search page (CMD+K). Is it due to skeleton UI?

studentofcoding commented 11 months ago

But we don't have the same problem when opening the search page (CMD+K). Is it due to skeleton UI?

Yes it's @eVoloshchak

lschurr commented 11 months ago

Any update here @eVoloshchak?

eVoloshchak commented 11 months ago

This is awaiting more proposals I think we need to dig deeper to figure out and fix the actual root cause for this

melvin-bot[bot] commented 11 months ago

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

melvin-bot[bot] commented 11 months ago

@eVoloshchak, @lschurr Whoops! This issue is 2 days overdue. Let's get this updated quick!

eVoloshchak commented 11 months ago

Not overdue, this is awaiting more proposals I think we need to dig deeper to figure out and fix the actual root cause for this

lschurr commented 11 months ago

Still waiting on proposals.

melvin-bot[bot] commented 11 months ago

@eVoloshchak @lschurr this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

akamefi202 commented 11 months ago

I'm not able reproduce this bug.

melvin-bot[bot] commented 11 months ago

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

eVoloshchak commented 11 months ago

@akamefi202, it's still reproducible for me

https://github.com/Expensify/App/assets/9059945/bf65dbc8-17fc-4dce-8314-b7cc2e01b7fd

It's present only on Desktop and only for accounts with policyRooms beta (or just override canUsePolicyRooms to return true

melvin-bot[bot] commented 11 months ago

@eVoloshchak, @lschurr Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

lschurr commented 11 months ago

Are we still waiting for proposals @eVoloshchak?

eVoloshchak commented 11 months ago

@lschurr, yes, this is reproducible, still waiting for proposals

melvin-bot[bot] commented 10 months ago

@eVoloshchak @lschurr this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

melvin-bot[bot] commented 10 months ago

Triggered auto assignment to @Julesssss (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

melvin-bot[bot] commented 10 months ago

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

mvtglobally commented 10 months ago

Issue not reproducible during KI retests. (First week)

eVoloshchak commented 10 months ago

This is still reproducible for me. To test this your account has to be added to the policy rooms beta

https://github.com/Expensify/App/assets/9059945/69cd7b00-94a8-4e96-8bcc-1ed6c294b87b

eVoloshchak commented 10 months ago

Not overdue, still awaiting proposals

Julesssss commented 10 months ago

Still awaiting proposals. @lschurr maybe we can double the bounty?

mvtglobally commented 10 months ago

Issue not reproducible during KI retests. (Second week)

melvin-bot[bot] commented 10 months ago

@eVoloshchak @Julesssss @lschurr this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

Decide whether any proposals currently meet our guidelines and can be approved as-is today
If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

melvin-bot[bot] commented 10 months ago

Current assignee @eVoloshchak is eligible for the Internal assigner, not assigning anyone new.

melvin-bot[bot] commented 10 months ago

Upwork job price has been updated to $1000

lschurr commented 10 months ago

Alright, I've updated the bounty on this one.

eVoloshchak commented 10 months ago

Still reproducible with high traffic account and canUseAllBetas=true

https://github.com/Expensify/App/assets/9059945/c90d4993-b001-4362-968d-eca94ee8f2ed

ikevin127 commented 10 months ago

While most likely this proposal will not meet the requirements, I'll give it a try anyways because I spent some time / had some fun debugging this and maybe some of my observations might be helpful to the next person attempting to solve it.

Proposal

Please re-state the problem that we are trying to solve in this issue

Modal freezes when it is opened / sometimes the sliding motion is neglected and it appears immediately without any sliding effect.

What is the root cause of that problem?

The issue is caused by the implementation of SectionList from this file.

When the right hand navigation modal is opened the component containing this list is also being rendered which causes the freeze due to multiple re-renders of the list loading new options (items) and expensive calculations of the layout every time the list items are rendered but especially the very first time the modal is opened.

Debugging observations:

the first time the modal is animating in is the worst in terms of performance, it gets better subsequently
commenting out the avatar images does improve performance of SectionList
the freeze happens on web too, using a high traffic account and canUseAllBetas=true
opening the right hand havigator only with the OptionsListSkeletonView by itself causes performance issues, it's not just the SectionList which leads one to think that the problem comes from BaseOptionsList component which contains all the heavy computations related to the SectionList, including the skeleton loading component
tweaking SectionList props like initialNumToRender, maxToRenderPerBatch and windowSize does not seem to help with this issue

What changes do you think we should make in order to solve the problem?

My solution does not fix the problem, but it offers an improvement in performance. My approach was to use InteractionManager.runAfterInteractions() with requestAnimationFrame() inside it in order to delay the rendering of the OptionsSelector component which includes the search input and SectionList like so:

    // src/pages/NewChatPage.js

    const [hasFinishedInteractions, setHasFinishedInteractions] = useState(false);

    useEffect(() => {
        const runAfterInteractionsTask = InteractionManager.runAfterInteractions(() => {
            requestAnimationFrame(() => {
                setHasFinishedInteractions(true);
            });
        });

        return () => {
            if (runAfterInteractionsTask) {
                runAfterInteractionsTask.cancel();
            }
            setHasFinishedInteractions(false);
        }
    }, []);

    ...
    // lower in the component return

    {hasFinishedInteractions && (
        <OptionsSelector
    ...

This improves the performance slightly by delaying the rendering of the OptionsSelector component while the navigation transition animation takes place which causes this performance issue.

Looking closely at the videos then going back / forward with the playback cursor we can observe:

after: the transition-in animation can be observed right from the first opening and also subsequently, not the smoothest but still noticeable compared to before
before: the modal is just appearing from none to opened on the first opening, no transition-in animation, then there's barely any transition-in animation going on subsequently which is also very janky

Videos

MacOS: Desktop (after / before)

- after https://github.com/Expensify/App/assets/56457735/d5f8a98d-0eed-4e24-98c6-358cb8af52a1 - before https://github.com/Expensify/App/assets/56457735/47cab1ca-3fd2-476b-8811-02d63cabb876

lschurr commented 10 months ago

@eVoloshchak could you review the proposal?

eVoloshchak commented 10 months ago

@ikevin127, a huge thank you for posting your findings here

I don't think the solution you're proposing is the best approach, since

as you've said yourself, it doesn't fix the actual problem
it still doesn't look quite right on videos, since there is a brief flash before the list is rendered

However, recently we've put more emphasis on improving the app performance, I think there is a plan to improve the FlatList performance specifically (I'll try to find the actual discussion on Slack and link it here), which might resolve this issue

lschurr commented 10 months ago

Any luck on finding the supporting Slack conversation @eVoloshchak?

melvin-bot[bot] commented 10 months ago

@eVoloshchak, @Julesssss, @lschurr Eep! 4 days overdue now. Issues have feelings too...

Julesssss commented 10 months ago

Sharing this in the performance channel, as this is probably better suited to an agency.

melvin-bot[bot] commented 10 months ago

@eVoloshchak, @Julesssss, @lschurr Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

lschurr commented 9 months ago

Any update on this one @Julesssss? Are we holding on this issue?

Julesssss commented 9 months ago

It was added to the performance project, but doesn't have a status yet.

@muttmuure do we need to do anything else here?

lschurr commented 9 months ago

Hi hi - any update on this @muttmuure?

lschurr commented 9 months ago

Bump @muttmuure

melvin-bot[bot] commented 9 months ago

@eVoloshchak, @Julesssss, @lschurr, @muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!

Expensify / App

[HOLD for payment 2024-01-22] [$1000] Desktop - FAB - Modal for 'Send Message' freezes when opened #28916

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Bug0 Triage Checklist (Main S/O)

Proposal

Please re-state the problem that we are trying to solve in this issue

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

Result

What alternative solutions did you explore? (Optional)

Proposal

Please re-state the problem that we are trying to solve in this issue

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

Videos