From 63667a9c6dc9facc0090f80a07e5590671d911c7 Mon Sep 17 00:00:00 2001
From: ShimaginAndrey <andrey.shimagin@onlyoffice.com>
Date: Wed, 13 Oct 2021 12:56:59 +0300
Subject: [PATCH] Editing skeleton

---
 apps/documenteditor/mobile/src/less/app.less             | 7 ++++++-
 apps/documenteditor/mobile/src/view/add/AddTable.jsx     | 9 +++++----
 apps/documenteditor/mobile/src/view/edit/EditTable.jsx   | 9 +++++----
 apps/presentationeditor/mobile/src/less/app.less         | 7 ++++++-
 apps/presentationeditor/mobile/src/view/add/AddOther.jsx | 9 +++++----
 .../mobile/src/view/edit/EditTable.jsx                   | 9 +++++----
 6 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less
index 73816d2b8..5708a6dd8 100644
--- a/apps/documenteditor/mobile/src/less/app.less
+++ b/apps/documenteditor/mobile/src/less/app.less
@@ -116,10 +116,15 @@
 // Skeleton table
 
 .table-styles .row div:not(:first-child) {
-    margin: 6px auto 0px;
+    margin: 2px auto 0px;
+}
+.table-styles li, .table-styles .row div {
+    padding: 0;
 }
 .table-styles .row .skeleton-list{
     display: block;
+    width: 70px;
+    height: 50px;
 }
 
 
diff --git a/apps/documenteditor/mobile/src/view/add/AddTable.jsx b/apps/documenteditor/mobile/src/view/add/AddTable.jsx
index b51f455ee..c37388f00 100644
--- a/apps/documenteditor/mobile/src/view/add/AddTable.jsx
+++ b/apps/documenteditor/mobile/src/view/add/AddTable.jsx
@@ -23,10 +23,11 @@ const AddTable = props => {
             {stateLoaderSkeleton ?
                 Array.from({ length: 31 }).map((item,index) => (
                 <li className='skeleton-list' key={index}>    
-                    <SkeletonBlock  width='65px' height='10px'  effect='wave'/>
-                    <SkeletonBlock  width='65px' height='10px'  effect='wave' />
-                    <SkeletonBlock  width='65px' height='10px'  effect='wave' />
-                    <SkeletonBlock  width='65px' height='10px'  effect='wave' />
+                    <SkeletonBlock  width='70px' height='8px'  effect='wave'/>
+                    <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                    <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                    <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                    <SkeletonBlock  width='70px' height='8px'  effect='wave' />
                 </li>
                 )) :
                     styles.map((style, index) => {
diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
index 1362ea497..342e2cf77 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx
@@ -199,10 +199,11 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
                 { stateLoaderSkeleton ?
                     Array.from({ length: 31 }).map((item,index) => (
                     <li className='skeleton-list' key={index}>    
-                        <SkeletonBlock  width='65px' height='10px'  effect='wave'/>
-                        <SkeletonBlock  width='65px' height='10px'  effect='wave' />
-                        <SkeletonBlock  width='65px' height='10px'  effect='wave' />
-                        <SkeletonBlock  width='65px' height='10px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave'/>
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
                     </li> 
                 )) :
                     styles.map((style, index) => {
diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less
index db49b52a4..9722834e8 100644
--- a/apps/presentationeditor/mobile/src/less/app.less
+++ b/apps/presentationeditor/mobile/src/less/app.less
@@ -103,8 +103,13 @@
 // Skeleton table
 
 .table-styles .row div:not(:first-child) {
-    margin: 6px auto 0px;
+    margin: 2px auto 0px;
+}
+.table-styles li, .table-styles .row div {
+    padding: 0;
 }
 .table-styles .row .skeleton-list{
     display: block;
+    width: 70px;
+    height: 50px;
 }
diff --git a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
index 3f74135be..3e26d553b 100644
--- a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
+++ b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx
@@ -26,10 +26,11 @@ const PageTable = props => {
                 {stateLoaderSkeleton ?
                     Array.from({ length: 31 }).map((item,index) => (
                     <li className='skeleton-list' key={index}>    
-                        <SkeletonBlock  width='65px' height='10px'  effect='wave'/>
-                        <SkeletonBlock  width='65px' height='10px'  effect='wave' />
-                        <SkeletonBlock  width='65px' height='10px'  effect='wave' />
-                        <SkeletonBlock  width='65px' height='10px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave'/>
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
                     </li>
                 )) :
                     styles.map((style, index) => {
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
index 993505773..20e53b615 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx
@@ -40,10 +40,11 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer
             { stateLoaderSkeleton ?
                     Array.from({ length: 31 }).map((item,index) => (
                     <li className='skeleton-list' key={index}>    
-                        <SkeletonBlock  width='65px' height='10px'  effect='wave'/>
-                        <SkeletonBlock  width='65px' height='10px'  effect='wave' />
-                        <SkeletonBlock  width='65px' height='10px'  effect='wave' />
-                        <SkeletonBlock  width='65px' height='10px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave'/>
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
+                        <SkeletonBlock  width='70px' height='8px'  effect='wave' />
                     </li> 
                 )) :
                     styles.map((style, index) => {