Tech4biz-channel/Channel-Frontend/src/App.tsx

51 lines
1.7 KiB
TypeScript

import { RouterProvider } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { router } from "./app/router";
import { useEffect } from 'react';
import { useThemeStore } from './hooks/use-theme';
import { useAuthStore } from './hooks/use-auth';
import { ToastProvider } from "./components/ui/Toast";
const queryClient = new QueryClient({
defaultOptions: {
queries: { retry: 1, refetchOnWindowFocus: false }
}
});
export const App = () => {
const initTheme = useThemeStore(state => state.initTheme);
const { isInitializing, checkAuth } = useAuthStore();
useEffect(() => {
initTheme();
checkAuth();
}, [initTheme, checkAuth]);
if (isInitializing) {
return (
<div className="flex h-screen w-full flex-col items-center justify-center bg-ink-50 font-sans text-ink-900 transition-colors duration-500">
<div className="relative flex flex-col items-center gap-6">
<div className="relative">
<div className="w-12 h-12 border-2 border-ink-200 rounded-full"></div>
<div className="absolute inset-0 w-12 h-12 border-2 border-t-ink-900 rounded-full animate-spin"></div>
</div>
<div className="flex flex-col items-center gap-1.5">
<h2 className="text-xs font-bold tracking-[0.2em] text-ink-800 uppercase animate-pulse">Initializing</h2>
<p className="text-[10px] text-ink-400 tracking-wider">Securing connection...</p>
</div>
</div>
</div>
);
}
return (
<QueryClientProvider client={queryClient}>
<ToastProvider>
<RouterProvider router={router} />
</ToastProvider>
</QueryClientProvider>
);
};
export default App;