UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-02-05 12:35:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #597 from thecodacus/add-loading-on-git-import-from-url

Browse Source 
feat:Added backdrop and loading screen in Git clone from Url
This commit is contained in:
Anirban Kar 2024-12-17 00:16:29 +05:30 committed by GitHub
commit 0a4ef117ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/components/git/GitUrlImport.client.tsx
View File

@ -8,6 +8,8 @@ import { Chat } from '~/components/chat/Chat.client';
import { useGit } from '~/lib/hooks/useGit';
import { useChatHistory } from '~/lib/persistence';
import { createCommandsMessage, detectProjectCommands } from '~/utils/projectCommands';
import { LoadingOverlay } from '~/components/ui/LoadingOverlay';
import { toast } from 'react-toastify';
const IGNORE_PATTERNS = [
'node_modules/**',
@ -38,6 +40,7 @@ export function GitUrlImport() {
const { ready: historyReady, importChat } = useChatHistory();
const { ready: gitReady, gitClone } = useGit();
const [imported, setImported] = useState(false);
const [loading, setLoading] = useState(true);
const importRepo = async (repoUrl?: string) => {
if (!gitReady && !historyReady) {
@ -109,9 +112,23 @@ ${file.content}
return;
}
importRepo(url);
importRepo(url).catch((error) => {
console.error('Error importing repo:', error);
toast.error('Failed to import repository');
setLoading(false);
window.location.href = '/';
});
setImported(true);
}, [searchParams, historyReady, gitReady, imported]);
return <ClientOnly fallback={<BaseChat />}>{() => <Chat />}</ClientOnly>;
return (
<ClientOnly fallback={<BaseChat />}>
{() => (
<>
<Chat />
{loading && <LoadingOverlay message="Please wait while we clone the repository..." />}
</>
)}
</ClientOnly>
);
}

14
app/components/ui/LoadingOverlay.tsx Normal file
View File

@ -0,0 +1,14 @@
export const LoadingOverlay = ({ message = 'Loading...' }) => {
return (
<div className="fixed inset-0 flex items-center justify-center bg-black/80 z-50 backdrop-blur-sm">
{/* Loading content */}
<div className="relative flex flex-col items-center gap-4 p-8 rounded-lg bg-bolt-elements-background-depth-2 shadow-lg">
<div
className={'i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress'}
style={{ fontSize: '2rem' }}
></div>
<p className="text-lg text-bolt-elements-textTertiary">{message}</p>
</div>
</div>
);
};

4
app/routes/git.tsx
View File

@ -4,6 +4,7 @@ import { ClientOnly } from 'remix-utils/client-only';
import { BaseChat } from '~/components/chat/BaseChat';
import { GitUrlImport } from '~/components/git/GitUrlImport.client';
import { Header } from '~/components/header/Header';
import BackgroundRays from '~/components/ui/BackgroundRays';
export const meta: MetaFunction = () => {
return [{ title: 'Bolt' }, { name: 'description', content: 'Talk with Bolt, an AI assistant from StackBlitz' }];
@ -15,7 +16,8 @@ export async function loader(args: LoaderFunctionArgs) {
export default function Index() {
return (
<div className="flex flex-col h-full w-full">
<div className="flex flex-col h-full w-full bg-bolt-elements-background-depth-1">
<BackgroundRays />
<Header />
<ClientOnly fallback={<BaseChat />}>{() => <GitUrlImport />}</ClientOnly>
</div>