Serial Background Loading

Optimize performance for large venues with this progressive loading demonstration of the SeatmapBookingRenderer’s background loading capabilities.

The implementation showcases how to control the loading step time to ensure smooth rendering of complex seatmaps without blocking the main thread or causing UI freezes. The interface includes two zoom control buttons (+ and -) that remain responsive during the loading process, highlighting how the background loading approach maintains interactivity even while processing substantial venue data.

Code

 1import { IBookingRendererSettings, SeatmapBookingRenderer } from '../..';
 2import '../main.css';
 3// const eventId = '79454f98-b2af-4587-9584-d25f4629c9ec';
 4const eventId = 'b754ade8-09de-4bc9-ba30-14f5679fe3db';
 5const publicKey = 'a54a6cc6-1e42-49d0-ad38-6387c7ae55a6';
 6
 7function getUrlParams(url: URL) {
 8  const params: { [key: string]: any } = {};
 9  const switchToWebGL = url.searchParams.get('switchToWebGL');
10  const backgroundLoadStepTime = url.searchParams.get('backgroundLoadStepTime');
11
12  params.switchToWebGL = switchToWebGL ? JSON.parse(switchToWebGL) : false;
13  params.backgroundLoadStepTime = backgroundLoadStepTime
14    ? Number(backgroundLoadStepTime)
15    : undefined;
16
17  return params;
18}
19
20const url = new URL(window.location.href);
21const { switchToWebGL, backgroundLoadStepTime } = getUrlParams(url);
22
23const settings: IBookingRendererSettings = {
24  env: 'stage',
25  publicKey,
26  switchToWebGL,
27  backgroundLoadStepTime,
28};
29
30const el = document.getElementById('root');
31
32if (el) {
33  const renderer = (window.seatmapRenderer = new SeatmapBookingRenderer(el, settings));
34
35  renderer.loadEvent(eventId);
36}

HTML

1<div id="root"></div>
2<div class="ZoomButtonList">
3  <div class="ZoomButton" onclick="seatmapRenderer.zoomIn()">+</div>
4  <div class="ZoomButton" onclick="seatmapRenderer.zoomOut()">–</div>
5</div>