How do I use the useComputedStyles option and load with a spinner, etc. when using format.toSVG?

[james-ep01]

Introduction

When using format.toSVG, the useComputedStyles option states in the document that this requires a lot of computations and it might significantly affect the export time.
When I actually used the true option, it was incredibly slow.
When using the false option, if there is no separate external style, is there no change in the svg image displayed on the screen?

And when loading a document as svg, I want to show loading with a spinner, etc., but I want to show the spinner while loading and show a lightbox when it is complete. How should I write the code in this case?

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[kumilingus]

When using the false option, if there is no separate external style, is there no change in the svg image displayed on the screen?

Correct.

And when loading a document as svg, I want to show loading with a spinner, etc., but I want to show the spinner while loading and show a lightbox when it is complete. How should I write the code in this case?

I am not sure I understand what do you mean by "loading a document as a SVG". How is it related to JointJS?

[james-ep01]

When exporting to svg, if you export to a large svg file, the screen freezes.

So I want to show a spinner (indicating loading) while the svg is being created.
When running the code below, the spinner appended to the body is not shown first, and the screen freezes until the svg is completed as a string in joint.format.toSVG.
And when changing to style and using the useComputedStyles option as true, the screen freezes for a very long time.
For reference, my elements are all made of svgs, so if I place about 30 parts, the svg file size is about 5 MB. The slightly complex wiring diagram is about 100 parts. So I want to show a spinner when saving the svg so that the user can wait.

save svg sample code :

let spinnerHtml = '<div class="spinner-border text-info" id="spinner_svg_export"  role="status">';
spinnerHtml +='<span class="sr-only">Loading...</span>';
spinnerHtml +='</div>'; 
$("body").append( spinnerHtml );

app.paper.hideTools(); 
joint.format.toSVG(app.paper, (svg, error) => { 
	if (error) {
		console.error(error.message);
	}
	const lightbox = new joint.ui.Lightbox({
		image: 'data:image/svg+xml,' + encodeURIComponent(svg),
		downloadable: true,
		fileName: saveFileName
	});
	$( '#spinner_svg_export' ).remove();
	lightbox.open();
}, {
preserveDimensions: true,  
convertImagesToDataUris: true, 
useComputedStyles: true , 
grid: true,
stylesheet: config.fontStyleSheet
});

Thank you.

[kumilingus]

1. This is a common browser issue. You can refer to this article or search online for solutions (you'll need to run the heavy task in the next animation frame).
2. Consider optimizing the images in your diagram. If the same image is used multiple times, you can define your shapes using the <use/> element and reference the image once per type. See example.

[james-ep01]

Using setTimeout is the simplest way.
Since the url is used to load the json file that was created, we can know when the load is complete with ajax, but I guess I'll have to solve this problem in another way.

Thank you.