fix: Warning: Functions are not valid as a React child

felixmosh · Jul 17, 2023 · 0141a99 · 0141a99
1 parent b4994eb
commit 0141a99
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
@@ -4,6 +4,7 @@ import { ToastContainer } from 'react-toastify';
 import { ConfirmModal } from './components/ConfirmModal/ConfirmModal';
 import { Header } from './components/Header/Header';
 import { HeaderActions } from './components/HeaderActions/HeaderActions';
+import { Loader } from './components/Loader/Loader';
 import { Menu } from './components/Menu/Menu';
 import { Title } from './components/Title/Title';
 import { useActiveQueue } from './hooks/useActiveQueue';
@@ -34,10 +35,10 @@ export const App = () => {
       <main>
         <div>
           {state.loading ? (
-            'Loading...'
+            <Loader />
           ) : (
             <>
-              <Suspense fallback={() => 'Loading...'}>
+              <Suspense fallback={<Loader />}>
                 <Switch>
                   <Route
                     path="/queue/:name"

diff --git a/packages/ui/src/components/Loader/Loader.tsx b/packages/ui/src/components/Loader/Loader.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const Loader = () => <div>Loading...</div>;
diff --git a/packages/ui/src/hooks/useSettings.ts b/packages/ui/src/hooks/useSettings.ts
@@ -1,4 +1,4 @@
-import create from 'zustand';
+import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
 interface SettingsState {