[HOLD for payment 2024-08-26] [$125] 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
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6510808_1718197001166.SWZP9288.mp4

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-08-26
• Automatic offers:
• dominictb | Contributor | 103173114

Issue Owner

Current Issue Owner: @sonialiap

[melvin-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]

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

[melvin-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]

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