From 0141a9975072ba52132446e4804b20a7ff21014b Mon Sep 17 00:00:00 2001
From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>
Date: Mon, 17 Jul 2023 12:29:42 +0300
Subject: [PATCH] fix: Warning: Functions are not valid as a React child

---
 packages/ui/src/App.tsx                      | 5 +++--
 packages/ui/src/components/Loader/Loader.tsx | 3 +++
 packages/ui/src/hooks/useSettings.ts         | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)
 create mode 100644 packages/ui/src/components/Loader/Loader.tsx

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 55a13941..f3d98514 100644
--- 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
new file mode 100644
index 00000000..45f44141
--- /dev/null
+++ 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
index 4e18a4df..e263a83c 100644
--- 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 {