Lazily load the burger component

soaringmeteo · Jan 24, 2024 · 61b672d · 61b672d
1 parent f700a71
commit 61b672d
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 30 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -4,7 +4,7 @@ import { insert, render, style } from 'solid-js/web';
 import { initializeMap } from './map/Map';
 import { fetchForecastRuns } from './data/ForecastMetadata';
 import {Domain, gfsModel, wrfModel} from './State';
-import { Burger } from './Burger';
+import { BurgerButton } from './BurgerButton';
 import { css } from "./css-hooks";
 import {LayerKeys} from "./LayerKeys";
 import { HelpButton } from './help/HelpButton';
@@ -74,7 +74,7 @@ export const start = (containerElement: HTMLElement): void => {
  return <>
  <style>{ css }</style>
  <span style={{ position: 'absolute', top: 0, left: 0, 'z-index': 200 /* must be above the “period selector” */ }}>
- <Burger domain={props.domain} />
+ <BurgerButton domain={props.domain} />
  </span>
  <PeriodSelectors domain={props.domain} locationClicks={mapHooks.locationClicks} />
  <LayerKeys domain={props.domain} />

diff --git a/frontend/src/Burger.tsx b/frontend/src/Burger.tsx
@@ -1,11 +1,10 @@
-import {createSignal, JSX, Show} from "solid-js";
+import {createSignal, JSX} from "solid-js";
 import { Domain } from "./State";
 import {
  burgerBorderTopStyle,
  burgerOptionStyle,
  closeButton,
  closeButtonSize,
- periodSelectorHeight
 } from "./styles/Styles";
 import { surfaceOverMap } from "./styles/Styles";
 import { Settings } from "./Settings";
@@ -21,32 +20,11 @@ import hooks from "./css-hooks";
  */
 export const Burger = (props: {
  domain: Domain
+ close: () => void
 }): JSX.Element => {
 
- const [expanded, setExpanded] = createSignal(false);
  const [areSettingsVisible, makeSettingsVisible] = createSignal(false);
 
- const menuBtn =
- <div
- style={{
- ...surfaceOverMap,
- width: `${periodSelectorHeight}px`,
- height: `${periodSelectorHeight}px`,
- cursor: 'pointer',
- 'user-select': 'none',
- padding: '3px',
- border: 'thin solid darkGray',
- 'box-sizing': 'border-box',
- 'background-color': '#009688',
- color: '#fff',
- 'text-align': 'center',
- 'font-weight': 'bold',
- 'font-size': `${periodSelectorHeight / 2}px`,
- 'line-height': `1.5`
- }}
- onClick={() => { setExpanded(!expanded()); }}
- >☰</div> as HTMLElement;
-
  const staticEntries = [
  ['About', '/'],
  ['Support Soaringmeteo', '/don.html'],
@@ -89,7 +67,7 @@ export const Burger = (props: {
  Soaringmeteo
  </div>
  <div
- onClick={ () => setExpanded(false) }
+ onClick={ () => props.close() }
  style={hooks({
  ...closeButton,
  position: 'absolute',
@@ -117,14 +95,14 @@ export const Burger = (props: {
  }
  </div>;
 
- return <Show when={ expanded() } fallback={ menuBtn }>
- <OverlayContainer handleClick={ () => setExpanded(false) }>
+ return <>
+ <OverlayContainer handleClick={ () => props.close() }>
  {options}
  </OverlayContainer>
  <Settings
  isVisible={ areSettingsVisible() }
  close={ () => makeSettingsVisible(false) }
  domain={ props.domain }
  />
- </Show>
+ </>
 };
diff --git a/frontend/src/BurgerButton.tsx b/frontend/src/BurgerButton.tsx
@@ -0,0 +1,44 @@
+import {createSignal, JSX, Show, lazy} from "solid-js";
+import { Domain } from "./State";
+import { periodSelectorHeight } from "./styles/Styles";
+import { surfaceOverMap } from "./styles/Styles";
+
+const Burger = lazy(() => import('./Burger').then(module => ({ default: module.Burger })));
+
+/**
+ * Burger menu with links to the other parts of the website.
+ *
+ * The menu is hidden when a detailed view (meteogram or sounding)
+ * is displayed.
+ */
+export const BurgerButton = (props: {
+ domain: Domain
+}): JSX.Element => {
+
+ const [expanded, setExpanded] = createSignal(false);
+
+ const menuBtn =
+ <div
+ style={{
+ ...surfaceOverMap,
+ width: `${periodSelectorHeight}px`,
+ height: `${periodSelectorHeight}px`,
+ cursor: 'pointer',
+ 'user-select': 'none',
+ padding: '3px',
+ border: 'thin solid darkGray',
+ 'box-sizing': 'border-box',
+ 'background-color': '#009688',
+ color: '#fff',
+ 'text-align': 'center',
+ 'font-weight': 'bold',
+ 'font-size': `${periodSelectorHeight / 2}px`,
+ 'line-height': `1.5`
+ }}
+ onClick={() => { setExpanded(!expanded()); }}
+ >☰</div> as HTMLElement;
+
+ return <Show when={ expanded() } fallback={ menuBtn }>
+ <Burger domain={ props.domain } close={ () => setExpanded(false) } />
+ </Show>
+};