[$250] Track expense - Preview image of the shared expense only loads if you open it and go back

[lanitochka17]

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

---

Version Number: 1.4.82-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4624340&group_by=cases:section_id&group_id=309130&group_order=asc Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with any account with a workspace
3. Track a scan expense in the self DM
4. "Share it with your accountant" on the actionable whisper
5. Share it in any workspace
6. Open the expense
7. Navigate back

Expected Result:

Preview image should be available immediately

Actual Result:

Preview image of the shared expense only loads if you open the expense and go back

Workaround:

Unknown

Platforms:

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

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [x] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/f0335bf0-f507-4895-b0e2-fab42b47297f

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017e8abcd538b6fd27
• Upwork Job ID: 1800905696348764772
• Last Price Increase: 2024-07-03

Issue Owner

Current Issue Owner: @mollfpr

[melvin-bot[bot]]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@sonialiap FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~017e8abcd538b6fd27

[melvin-bot[bot]]

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

[TheGithubDev]

Proposal

Re-state the problem that we are trying to solve in this issue:

The preview image of a shared expense only loads if the user opens the expense and then navigates back. The preview image should be available immediately after sharing the expense.

Root cause of that problem?

The root cause of the issue is due to the image loading mechanism not being triggered correctly when the expense is initially shared. The image loader isn't fetching the image until the expense detail is opened and the view is refreshed.

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

To solve this problem, we need to ensure that the image loading mechanism is triggered immediately when the expense is shared. To achieve this, we should -

1. Trigger Image Load on Sharing:

   • Ensure that the image loader is called when the expense is shared, updating the preview image in the list without needing to open and go back.

   • • Modify the sharing function to include a call to the image loader after the expense is shared.

       
       // Example logic to trigger image load on sharing
       function shareExpense(expenseId, workspaceId) {
       shareExpenseWithWorkspace(expenseId, workspaceId)
       .then(() => {
          loadImagePreview(expenseId); // Trigger image load
       })
       .catch(error => {
          console.error("Error sharing expense:", error);
       });
       }

   function loadImagePreview(expenseId) { // Logic to load and update image preview const previewImage = getExpensePreviewImage(expenseId); updatePreviewImageState(expenseId, previewImage); }

2. Update State Management:

   • Make sure the state reflecting the preview image is updated promptly when the sharing action is completed.

   • • Ensure that the state is updated correctly after the image is loaded.

       function updatePreviewImageState(expenseId, image) {
       // Logic to update state with the new image
       setState(prevState => ({
       ...prevState,
       expenses: prevState.expenses.map(expense => 
          expense.id === expenseId ? {...expense, previewImage: image} : expense
       )
       }));
       }

Any alternative solutions explored? (Optional)

Preload Images:

• We can implement a mechanism to preload images for all expenses, reducing loading times when navigating through expenses.

[mollfpr]

The root cause of the issue is due to the image loading mechanism not being triggered correctly when the expense is initially shared.

@TheGithubDev Could you be more specific about where the issue is and where we need to apply the changes?

[melvin-bot[bot]]

@sonialiap, @mollfpr Eep! 4 days overdue now. Issues have feelings too...

[mollfpr]

Not overdue. Waiting for the contributor and new proposals.

[TheGithubDev]

@mollfpr Thanks for your feedback!

Specific Issue Location: The issue lies within the image loading mechanism that handles the preview images of shared expenses. Currently, this mechanism is not triggered until the user opens the expense detail view and then navigates back. As a result, the preview image does not load immediately upon sharing the expense.

Specific Changes Required:

1. Trigger Image Load on Sharing: Location: The function responsible for sharing the expense, located in the expense sharing service. Change: Modify this function to include a call to the image loading mechanism immediately after the expense is successfully shared.

   // Example logic to trigger image load on sharing
   function shareExpense(expenseId, workspaceId) {
      shareExpenseWithWorkspace(expenseId, workspaceId)
          .then(() => {
              loadImagePreview(expenseId); // Trigger image load
          })
          .catch(error => {
              console.error("Error sharing expense:", error);
          });
   }
   
   function loadImagePreview(expenseId) {
      // Logic to load and update image preview
      const previewImage = getExpensePreviewImage(expenseId);
      updatePreviewImageState(expenseId, previewImage);
   }

2. Update State Management: Location: The component that manages the state of the expenses list, within the React state. Change: Ensure that the state is updated promptly with the new preview image once it has been loaded.

   function updatePreviewImageState(expenseId, image) {
      // Logic to update state with the new image
      setState(prevState => ({
          ...prevState,
          expenses: prevState.expenses.map(expense => 
              expense.id === expenseId ? {...expense, previewImage: image} : expense
          )
      }));
   }

[melvin-bot[bot]]

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

[mollfpr]

@TheGithubDev I understand what you're trying to achieve but I don't see the RCA pointing to the correct root cause. Could you be more specific where do we need to implement the changes?

[melvin-bot[bot]]

@sonialiap, @mollfpr Eep! 4 days overdue now. Issues have feelings too...

[sonialiap]

@TheGithubDev if you're still interested in working on this, would love to hear your thoughts on where we would need to implement this change? (bumping mollfpr's question https://github.com/Expensify/App/issues/43579#issuecomment-2179257630)

[melvin-bot[bot]]

📣 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]]

@sonialiap @mollfpr 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!

[melvin-bot[bot]]

@sonialiap, @mollfpr Still overdue 6 days?! Let's take care of this!

[mollfpr]

No new proposals.

[melvin-bot[bot]]

@sonialiap, @mollfpr Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot[bot]]

📣 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]]

@sonialiap, @mollfpr Still overdue 6 days?! Let's take care of this!

[mollfpr]

Still no new proposals.

[melvin-bot[bot]]

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