add Loading component

Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>

packages/ui/src/components/Component.svelte

@@ -18,7 +18,7 @@
   import type { AnyComponent } from '../types'
   
   // import Icon from './Icon.svelte'
-  import Spinner from './Spinner.svelte'
+  import Loading from './Loading.svelte'
   import ErrorBoundary from './internal/ErrorBoundary'
 
   export let is: AnyComponent
@@ -28,7 +28,7 @@
 </script>
 
 {#await component}
-  <div class="spinner-container"><div class="inner"><Spinner /></div></div>
+  <Loading/>
 {:then Ctor}
   <ErrorBoundary>
     <Ctor {...props} on:change on:close on:open on:click/>
@@ -39,29 +39,3 @@
   {err}
   <!-- <Icon icon={ui.icon.Error} size="32" /> -->
 {/await}
-
-<style lang="scss">
-
-.spinner-container {
-  display: flex;
-  height: 100%;
-}
-
-@keyframes makeVisible {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.spinner-container .inner {
-  margin: auto;
-  opacity: 0;
-  animation-name: makeVisible;
-  animation-duration: 0.25s;
-  animation-delay: 0.1s;
-}
-
-</style>

packages/ui/src/components/Loading.svelte

@@ -0,0 +1,48 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 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 type="ts">
+  import Spinner from './Spinner.svelte'
+</script>
+
+
+<div class="spinner-container"><div class="inner"><Spinner /></div></div>
+
+<style lang="scss">
+
+.spinner-container {
+  display: flex;
+  height: 100%;
+}
+
+@keyframes makeVisible {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.spinner-container .inner {
+  margin: auto;
+  opacity: 0;
+  animation-name: makeVisible;
+  animation-duration: 0.25s;
+  animation-delay: 0.1s;
+}
+
+</style>

packages/ui/src/index.ts

@@ -51,6 +51,7 @@ export { default as CheckBoxWithLabel } from './components/CheckBoxWithLabel.sve
 export { default as CheckBoxList } from './components/CheckBoxList.svelte'
 export { default as IconSize } from './components/IconSize.svelte'
 export { default as EditWithIcon } from './components/EditWithIcon.svelte'
+export { default as Loading } from './components/Loading.svelte'
 
 export { default as IconAdd } from './components/icons/Add.svelte'
 export { default as IconSearch } from './components/icons/Search.svelte'

plugins/view-resources/src/components/TableView.svelte

@@ -20,7 +20,7 @@ import { createEventDispatcher } from 'svelte'
 import type { Ref, Class, Doc, Space, FindOptions } from '@anticrm/core'
 import { buildModel } from '../utils'
 import { getClient } from '@anticrm/presentation'
-import { Label, showModal } from '@anticrm/ui'
+import { Label, showModal, Loading } from '@anticrm/ui'
 import type { AnyComponent } from '@anticrm/ui'
 
 import { createQuery } from '@anticrm/presentation'
@@ -59,7 +59,7 @@ function onClick(object: Doc) {
 </script>
 
 {#await buildModel(client, _class, config, options)}
- ...
+ <Loading/>
 {:then model}
 <table class="table-body">
   <tr class="tr-head">

plugins/workbench-resources/src/components/WorkbenchApp.svelte

@@ -17,7 +17,7 @@
 
 import { getResource, getMetadata } from '@anticrm/platform'
 import type { Client } from '@anticrm/core'
-import { navigate } from '@anticrm/ui'
+import { navigate, Loading } from '@anticrm/ui'
 
 import client from '@anticrm/client'
 import login from '@anticrm/login'
@@ -40,7 +40,7 @@ async function connect(): Promise<Client | undefined> {
 </script>
 
 {#await connect()}
-  <div></div>
+  <Loading/>
 {:then client}
   <Workbench {client}/>
 {:catch error}