Table footer left sticky (#2604)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

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

@@ -362,6 +362,7 @@
 
 <style lang="scss">
   .footer {
+    width: 100%;
     background-color: var(--body-color);
     display: flex;
     align-items: flex-end;
@@ -369,12 +370,14 @@
     z-index: 2;
     position: sticky;
     bottom: 0;
+    box-shadow: inset 0 1px 0 0 var(--divider-color);
 
     .content {
       display: flex;
       align-items: center;
-      width: 100%;
+      width: max-content;
-      box-shadow: inset 0 1px 0 0 var(--divider-color);
+      position: sticky;
+      left: 0;
       height: 2.5rem;
       &.padding {
         padding-left: 2.5rem;

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

@@ -21,6 +21,7 @@
     Button,
     getEventPositionElement,
     getPlatformColorForText,
+    Loading,
     SelectPopup,
     showPopup,
     ToggleButton
@@ -45,6 +46,7 @@
       (res) => {
         preference = res[0]
         attributes = getConfig(viewlet, preference)
+        loading = false
       },
       { limit: 1 }
     )
@@ -55,7 +57,8 @@
   const client = getClient()
   const hierarchy = client.getHierarchy()
   const dispatch = createEventDispatcher()
-  let attributes = getConfig(viewlet, preference)
+  let attributes: AttributeConfig[] = []
+  let loading = true
 
   interface AttributeConfig {
     enabled: boolean
@@ -307,6 +310,9 @@
     dispatch('close')
   }}
 >
+  {#if loading}
+    <Loading />
+  {:else}
     <div class="flex-row-stretch flex-wrap">
       {#each enabled as attribute, i}
         <div
@@ -361,6 +367,7 @@
         </div>
       {/each}
     </div>
+  {/if}
   <svelte:fragment slot="footer">
     <Button label={view.string.RestoreDefaults} on:click={restoreDefault} />
   </svelte:fragment>