0

I am generating a report for multiple datasets by overlaying WMS images from GeoServer as a slideshow and taking screenshots using the html2canvas library.

The problem is that if the user navigates to another component or screen, then the slideshow component unmounts and report generation stops. Is there a way to keep the slideshow component running in the background using React.Suspense or any other method?

Here is an example of the component that is generating the report:

import React, { useEffect } from 'react';
import html2canvas from 'html2canvas';

function ReportGenerator() {
  useEffect(() => {
    // Load WMS layers and take screenshots
    // ...
  }, []);

  return (
    <div>
      {/* Map and WMS layers */}
    </div>
  );
}

export default ReportGenerator;

Is there any other way or a better way to handle this issue?

To give you a better overview of my component structure, it is set up as follows:

App
|____Switch
|     |___Route 
|     |    |___MapScreen
|     |            |____ Layout
|     |                     |____Sidebar
|     |                     |____Main
|     |                              |____Wrapper
|     |                                       |_____MapLayout
|     |                                       |_____ReportGenerator
|     |___Route 
|     |     |___DashboardScreen
|     |              |____ Layout
|     |                       |__Sidebar
|     |                       |____Main
|     |                            |_____NewsFeedList
|     |                                       |_____DataCard
|     |                                       |_____Buttons
Nora Söderlund
  • 1,148
  • 2
  • 18
Abhilash
  • 43
  • 1
  • 8
  • 1
    Can you move the component farther up the component tree, to a spot that doesn't get unmounted? – Nicholas Tower Dec 26 '22 at 05:30
  • @NicholasTower Component in question is a direct child of the component in my , and therefore it is not possible to move it farther up the component tree. I have considered using the component to try to keep the component "alive" while the user is navigating to other screens, but I am not sure if this is the best solution or if there is a better way to handle this issue. – Abhilash Dec 26 '22 at 05:39
  • Why can't you move the component to a parent of the ``? That's the way to keep it mounted. If some parts of the component need to unmount, split your component into two components, one which has the logic you want to keep mounted, and one that has the elements you want to show only if the route matches. Move the first one up, keep the second one inside the route. – Nicholas Tower Dec 26 '22 at 05:52
  • @NicholasTower I understand that moving the ReportGenerator component farther up the component tree may help keep it mounted. However, I am unable to move the component outside of the Wrapper (google maps react wrapper) as it needs to be within this component in order to display the map. Do you have any suggestions on how I can keep the ReportGenerator component mounted while still keeping it within the Wrapper (google maps react wrapper) component? – Abhilash Dec 26 '22 at 06:46
  • @NicholasTower, Is it possible to generate the report by opening it in a new window, rather than rendering it within the existing component structure? I mean would this allow the report generation process to continue, even if the user navigates to a different route or screen on the main window? – Abhilash Dec 26 '22 at 12:10

0 Answers0