centralize loading app names

public/app/app.tsx

@@ -11,22 +11,25 @@ import history from '@webapp/util/history';
 
 import { SingleView } from './pages/SingleView';
 import { ComparisonView } from './pages/ComparisonView';
+import { LoadAppNames } from './components/LoadAppNames';
 
 const container = document.getElementById('reactRoot') as HTMLElement;
 const root = ReactDOM.createRoot(container);
 
 root.render(
   <Provider store={store}>
     <Notifications />
-    <Router history={history}>
-      <Switch>
-        <Route exact path={'/'}>
-          <SingleView />
-        </Route>
-        <Route path={'/comparison'}>
-          <ComparisonView />
-        </Route>
-      </Switch>
-    </Router>
+    <LoadAppNames>
+      <Router history={history}>
+        <Switch>
+          <Route exact path={'/'}>
+            <SingleView />
+          </Route>
+          <Route path={'/comparison'}>
+            <ComparisonView />
+          </Route>
+        </Switch>
+      </Router>
+    </LoadAppNames>
   </Provider>
 );

public/app/components/LoadAppNames.tsx

@@ -0,0 +1,8 @@
+import { loadAppNames } from '../hooks/loadAppNames';
+
+// LoadAppNames loads all app names automatically
+export function LoadAppNames(props: { children?: React.ReactNode }) {
+  loadAppNames();
+
+  return <>{props.children}</>;
+}

public/app/pages/ComparisonView.tsx

@@ -1,8 +1,5 @@
 import ContinuousComparisonView from '@webapp/pages/ContinuousComparisonView';
-import { loadAppNames } from '../hooks/loadAppNames';
 
 export function ComparisonView() {
-  loadAppNames();
-
   return <ContinuousComparisonView />;
 }

public/app/pages/SingleView.tsx

@@ -1,8 +1,5 @@
 import ContinuousSingleView from '@webapp/pages/ContinuousSingleView';
-import { loadAppNames } from '../hooks/loadAppNames';
 
 export function SingleView() {
-  loadAppNames();
-
   return <ContinuousSingleView />;
 }