Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Avivash/add loading UI #94

Merged
merged 5 commits into from Nov 19, 2022
Merged

Avivash/add loading UI #94

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
984e8b2
Feat: add loading spinner
avivash Nov 17, 2022
edad780
Merge branch 'icidasset/webnative-0.35' of github.com:webnative-examp…
avivash Nov 17, 2022
48fd61c
Fix: block loader during registration flow
avivash Nov 17, 2022
b1e6425
Fix: remove unnecessary loading spinner route exceptions
avivash Nov 18, 2022
ce78553
Feat: tie debug mode to dev flag
avivash Nov 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/components/common/FullScreenLoadingSpinner.svelte
View file
Open in desktop
@@ -0,0 +1,7 @@
<script lang="ts">
import LoadingSpinner from '$components/common/LoadingSpinner.svelte'
</script>

<div class="w-full h-[calc(100vh-64px)] flex items-center justify-center">
<LoadingSpinner />
</div>
3 changes: 3 additions & 0 deletions src/components/common/LoadingSpinner.svelte
View file
Open in desktop
@@ -0,0 +1,3 @@
<div
class="loader animate-spin ease-linear rounded-full border-4 border-t-4 border-t-orange-300 border-neutral h-16 w-16"
/>
19 changes: 13 additions & 6 deletions src/routes/+layout.svelte
View file
Open in desktop
@@ -1,11 +1,13 @@
<script lang="ts">
import '../global.css'
import { page } from '$app/stores'
import { addNotification } from '$lib/notifications'
import { appDescription, appImageURL, appName, appURL } from '$lib/app-info'
import { sessionStore, themeStore } from '../stores'
import { errorToMessage } from '$lib/session'
import { initialize } from '$lib/init'
import Footer from '$components/Footer.svelte'
import FullScreenLoadingSpinner from '$components/common/FullScreenLoadingSpinner.svelte'
import Header from '$components/Header.svelte'
import Notifications from '$components/notifications/Notifications.svelte'
import SidebarNav from '$components/nav/SidebarNav.svelte'
Expand Down Expand Up @@ -54,11 +56,16 @@

<div data-theme={$themeStore} class="min-h-screen">
<Notifications />
<SidebarNav>
<Header />
<div class="px-4">
<slot />
</div>
</SidebarNav>

{#if $sessionStore.loading && !$page.url.pathname.match(/register|backup|delegate/)}
avivash marked this conversation as resolved.
Show resolved Hide resolved
<FullScreenLoadingSpinner />
{:else}
<SidebarNav>
<Header />
<div class="px-4">
<slot />
</div>
</SidebarNav>
{/if}
<Footer />
</div>