Redesign Huly loading screen

packages/ui/src/components/AppLoading.svelte

@@ -0,0 +1,53 @@
+<!--
+// Copyright © 2025 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import { createEventDispatcher, onMount } from 'svelte'
+  import SquareSpinner from './icons/SquareSpinner.svelte'
+
+  export let shrink: boolean = false
+  export let label: string = ''
+  export let size: 'small' | 'medium' | 'large' = 'small'
+
+  const dispatch = createEventDispatcher()
+  let timer: any
+  onMount(() => {
+    timer = setTimeout(() => {
+      dispatch('progress')
+    }, 50)
+    return () => {
+      clearTimeout(timer)
+    }
+  })
+</script>
+
+<div class="spinner-container" class:fullSize={!shrink}>
+  <div data-label={label} class="flex-row-center flex-gap-2" class:labeled={label !== ''}>
+    <SquareSpinner {size} />
+    <slot />
+  </div>
+</div>
+
+<style lang="scss">
+  .spinner-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.fullSize {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

packages/ui/src/components/Component.svelte

@@ -19,6 +19,7 @@
   import type { AnyComponent, AnySvelteComponent } from '../types'
   import ErrorPresenter from './ErrorPresenter.svelte'
   import Loading from './Loading.svelte'
+  import AppLoading from './AppLoading.svelte'
   import ErrorBoundary from './internal/ErrorBoundary'
   import { clone } from '@hcengineering/core'
 
@@ -30,6 +31,7 @@
   export let showLoading = true
   export let inline: boolean = false
   export let disabled: boolean = false
+  export let appLoading: boolean = false
 
   let _is: AnyComponent | AnySvelteComponent = is
 
@@ -105,7 +107,11 @@
 {#if _is != null}
   {#if loading}
     {#if showLoading}
-      <Loading {shrink} />
+      {#if appLoading}
+        <AppLoading {shrink} />
+      {:else}
+        <Loading {shrink} />
+      {/if}
     {/if}
   {:else if Ctor != null}
     <ErrorBoundary bind:error>