flora is a fast and secure runtime that lets you write discord bots for your servers, with a rich TypeScript SDK, without worrying about running infrastructure. [mirror]
fix(frontend): no fullscreen editor loading fallback
+32
-10
+32
-10
apps/frontend/src/App.tsx
+32
-10
apps/frontend/src/App.tsx
···
1
1
import { RequireAuth } from '@/components/require-auth'
2
-
import { AppProvider } from '@/contexts/AppContext'
2
+
import { DashboardSidebar } from '@/components/sidebar/app-sidebar'
3
+
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
4
+
import { AppProvider, useApp } from '@/contexts/AppContext'
3
5
import { Seo } from '@/lib/seo'
4
6
import { ThemeProvider } from '@/lib/theme'
5
7
import { Dashboard } from '@/pages/dashboard'
···
10
12
import { Settings } from '@/pages/settings'
11
13
import { TermsOfServicePage } from '@/pages/terms-of-service-page'
12
14
import { UserSettingsPage } from '@/pages/user-settings-page'
13
-
import { type ComponentType, lazy, Suspense } from 'react'
14
-
import { Route, Switch } from 'wouter'
15
+
import { type ComponentType, lazy, Suspense, useEffect } from 'react'
16
+
import { Route, Switch, useParams } from 'wouter'
15
17
16
18
function NotFoundPage() {
17
19
return (
···
27
29
return { default: module.EditorPage }
28
30
})
29
31
32
+
function EditorPageLoadingFallback() {
33
+
const { guildId } = useParams<{ guildId: string }>()
34
+
const { setView, setSelectedGuild } = useApp()
35
+
36
+
useEffect(() => {
37
+
if (guildId) setSelectedGuild(guildId)
38
+
setView('editor')
39
+
}, [guildId, setSelectedGuild, setView])
40
+
41
+
return (
42
+
<SidebarProvider>
43
+
<div className='relative flex h-dvh w-full'>
44
+
<DashboardSidebar />
45
+
<SidebarInset className='flex min-w-0 flex-1'>
46
+
<div className='absolute top-3 left-3 z-40 lg:hidden'>
47
+
<SidebarTrigger />
48
+
</div>
49
+
<div className='flex h-full min-h-0 w-full items-center justify-center text-sm text-muted-foreground'>
50
+
Loading editor…
51
+
</div>
52
+
</SidebarInset>
53
+
</div>
54
+
</SidebarProvider>
55
+
)
56
+
}
57
+
30
58
function EditorPageRoute() {
31
59
return (
32
-
<Suspense
33
-
fallback={
34
-
<div className='flex min-h-svh items-center justify-center p-6 text-sm text-muted-foreground'>
35
-
Loading editor…
36
-
</div>
37
-
}
38
-
>
60
+
<Suspense fallback={<EditorPageLoadingFallback />}>
39
61
<LazyEditorPage />
40
62
</Suspense>
41
63
)