fix: workaround to force check for initial setup

ui/src/App.js

@@ -1,5 +1,5 @@
-import React from 'react'
+import React, { useState } from 'react'
-import { Admin, Resource, resolveBrowserLocale } from 'react-admin'
+import { Admin, resolveBrowserLocale, Resource } from 'react-admin'
 import dataProvider from './dataProvider'
 import authProvider from './authProvider'
 import polyglotI18nProvider from 'ra-i18n-polyglot'
@@ -20,8 +20,6 @@ const i18nProvider = polyglotI18nProvider(
 )
 
 const App = () => (
-  <>
-    <div>
   <Admin
     theme={theme}
     customReducers={{ queue: playQueueReducer }}
@@ -32,18 +30,37 @@ const App = () => (
     loginPage={Login}
   >
     {(permissions) => [
-          <Resource
+      <Resource name="artist" {...artist} options={{ subMenu: 'library' }} />,
-            name="artist"
-            {...artist}
-            options={{ subMenu: 'library' }}
-          />,
       <Resource name="album" {...album} options={{ subMenu: 'library' }} />,
       <Resource name="song" {...song} options={{ subMenu: 'library' }} />,
       permissions === 'admin' ? <Resource name="user" {...user} /> : null,
       <Player />
     ]}
   </Admin>
-    </div>
-  </>
 )
-export default App
+
+// TODO: This is a complicated way to force a first check for initial setup. A better way would be to send this info
+// set in the `window` object in the index.html
+const AppWrapper = () => {
+  const [checked, setChecked] = useState(false)
+
+  if (!checked) {
+    dataProvider
+      .getOne('keepalive', { id: new Date().getTime() })
+      .then(() => setChecked(true))
+      .catch((err) => {
+        authProvider
+          .checkError(err)
+          .then(() => {
+            setChecked(true)
+          })
+          .catch(() => {
+            setChecked(true)
+          })
+      })
+    return null
+  }
+  return <App />
+}
+
+export default AppWrapper