UI loading improvements

Fixed: Caching for dynamically loaded JS files
Fixed: Incorrect caching of initialize.js
(cherry picked from commit f0cb5b81f140c67fa84162e094cc4e0f3476f5da)

frontend/src/Utilities/String/translate.ts

@@ -4,14 +4,14 @@ function getTranslations() {
   return createAjaxRequest({
     global: false,
     dataType: 'json',
-    url: '/localization'
+    url: '/localization',
   }).request;
 }
 
-let translations = {};
+let translations: Record<string, string> = {};
 
-export function fetchTranslations() {
-  return new Promise(async(resolve) => {
+export async function fetchTranslations(): Promise<boolean> {
+  return new Promise(async (resolve) => {
     try {
       const data = await getTranslations();
       translations = data.Strings;
@@ -23,12 +23,15 @@ export function fetchTranslations() {
   });
 }
 
-export default function translate(key, args = []) {
+export default function translate(
+  key: string,
+  args?: (string | number | boolean)[]
+) {
   const translation = translations[key] || key;
 
   if (args) {
     return translation.replace(/\{(\d+)\}/g, (match, index) => {
-      return args[index];
+      return String(args[index]) ?? match;
     });
   }
 

frontend/src/bootstrap.tsx

@@ -0,0 +1,21 @@
+import { createBrowserHistory } from 'history';
+import React from 'react';
+import { render } from 'react-dom';
+import createAppStore from 'Store/createAppStore';
+import { fetchTranslations } from 'Utilities/String/translate';
+import App from './App/App';
+
+export async function bootstrap() {
+  const history = createBrowserHistory();
+  const store = createAppStore(history);
+  const hasTranslationsError = !(await fetchTranslations());
+
+  render(
+    <App
+      store={store}
+      history={history}
+      hasTranslationsError={hasTranslationsError}
+    />,
+    document.getElementById('root')
+  );
+}

frontend/src/index.ejs

@@ -48,7 +48,15 @@
     />
 
     <link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css">
-    <!-- webpack bundles head -->
+
+    <script>
+      window.Prowlarr = {
+        urlBase: '__URL_BASE__'
+      };
+    </script>
+
+    <% for (key in htmlWebpackPlugin.files.js) { %><script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[key] %>" data-no-hash></script><% } %>
+    <% for (key in htmlWebpackPlugin.files.css) { %><link href="<%= htmlWebpackPlugin.files.css[key] %>" rel="stylesheet"></link><% } %>
 
     <title>Prowlarr</title>
 
@@ -77,7 +85,4 @@
     <div id="portal-root"></div>
     <div id="root" class="root"></div>
   </body>
-
-  <script src="/initialize.js" data-no-hash></script>
-  <!-- webpack bundles body -->
 </html>

frontend/src/index.ts

@@ -0,0 +1,19 @@
+import './polyfills';
+import 'Styles/globals.css';
+import './index.css';
+
+const initializeUrl = `${
+  window.Prowlarr.urlBase
+}/initialize.json?t=${Date.now()}`;
+const response = await fetch(initializeUrl);
+
+window.Prowlarr = await response.json();
+
+/* eslint-disable no-undef, @typescript-eslint/ban-ts-comment */
+// @ts-ignore 2304
+__webpack_public_path__ = `${window.Prowlarr.urlBase}/`;
+/* eslint-enable no-undef, @typescript-eslint/ban-ts-comment */
+
+const { bootstrap } = await import('./bootstrap');
+
+await bootstrap();