From 9998c6ed5bb0988d6697b51f3867c013f1adffd0 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Mon, 11 Oct 2021 16:31:52 +0300 Subject: [PATCH] [DE PE] Replacing loader on skeleton-templates --- apps/documenteditor/mobile/src/less/app.less | 18 +++---- .../mobile/src/view/add/Add.jsx | 8 +-- .../mobile/src/view/add/AddTable.jsx | 43 +++++++++------- .../mobile/src/view/edit/EditTable.jsx | 51 ++++++++++--------- .../mobile/src/controller/add/AddOther.jsx | 10 ++-- .../mobile/src/less/app.less | 18 +++---- .../mobile/src/view/add/AddOther.jsx | 30 +++++++---- .../mobile/src/view/edit/EditTable.jsx | 49 ++++++++++-------- 8 files changed, 128 insertions(+), 99 deletions(-) diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index 12a97dc46..73816d2b8 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -97,15 +97,6 @@ } } -#edit-table-style, #add-table { - .preloader-modal { - background-color: transparent; - .preloader { - --f7-preloader-color: var(--f7-theme-color-shade); - } - } -} - .item-content { .preview{ color: @gray; @@ -122,5 +113,14 @@ background: @black; } +// Skeleton table + +.table-styles .row div:not(:first-child) { + margin: 6px auto 0px; +} +.table-styles .row .skeleton-list{ + display: block; +} + diff --git a/apps/documenteditor/mobile/src/view/add/Add.jsx b/apps/documenteditor/mobile/src/view/add/Add.jsx index 535cd9e48..8dbf2dc05 100644 --- a/apps/documenteditor/mobile/src/view/add/Add.jsx +++ b/apps/documenteditor/mobile/src/view/add/Add.jsx @@ -185,10 +185,10 @@ const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({sto const onGetTableStylesPreviews = () => { const api = Common.EditorApi.get(); if(storeTableSettings.isRenderStyles) { - $$('.table-styles').hide(); - f7.preloader.showIn('.preload'); - setTimeout( () => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)), 10); - storeTableSettings.resetFlagRender(false); + setTimeout(() => { + storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)); + storeTableSettings.resetFlagRender(false); + },5); } } diff --git a/apps/documenteditor/mobile/src/view/add/AddTable.jsx b/apps/documenteditor/mobile/src/view/add/AddTable.jsx index fd69e7d02..b51f455ee 100644 --- a/apps/documenteditor/mobile/src/view/add/AddTable.jsx +++ b/apps/documenteditor/mobile/src/view/add/AddTable.jsx @@ -1,7 +1,7 @@ -import React, {Fragment, useState} from 'react'; +import React, {Fragment, useEffect, useState} from 'react'; import {observer, inject} from "mobx-react"; import { f7 } from 'framework7-react'; -import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react'; +import {Page, Navbar, List, ListItem, ListButton, Row, SkeletonBlock, BlockTitle, Range, Toggle, Icon} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; @@ -9,30 +9,39 @@ const AddTable = props => { const storeTableSettings = props.storeTableSettings; const styles = storeTableSettings.arrayStyles; + const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true); - const onReadyStyles = () => { - f7.preloader.hideIn('.preload'); - $$('.table-styles').show(); - } + useEffect(() => { + + if(!storeTableSettings.isRenderStyles) setLoaderSkeleton(false); + + }, [storeTableSettings.isRenderStyles]); return ( - -
-
-
    - {styles.map((style, index) => { +
    +
      + {stateLoaderSkeleton ? + Array.from({ length: 31 }).map((item,index) => ( +
    • + + + + +
      • + )) : + styles.map((style, index) => { return (
    • {props.onStyleClick(style.templateId)}}>
      • - ) - })} -
    - {onReadyStyles()} -
    - + ) + }) + } +
+
) }; + export default inject("storeTableSettings")(observer(AddTable)); \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx index 070c436a4..1362ea497 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useEffect, useRef, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {Page, Navbar, NavRight, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react'; +import {Page, Navbar, NavRight, List, ListItem, ListButton, Row, BlockTitle,SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react'; import { f7 } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; @@ -173,22 +173,39 @@ const PageWrap = props => { // Style -const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick,storeTableSettings,onReadyStyles, onGetTableStylesPreviews,storeFocusObjects}) => { +const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick, storeTableSettings, onGetTableStylesPreviews,storeFocusObjects}) => { const tableObject = storeFocusObjects.tableObject; const styleId = tableObject && tableObject.get_TableStyle(); const [stateId, setId] = useState(styleId); + const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true); const styles = storeTableSettings.arrayStyles; - + useEffect(() => { if (storeTableSettings.isRenderStyles) { onGetTableStylesPreviews(); - storeTableSettings.resetFlagRender(false); - } + setTimeout(() => storeTableSettings.resetFlagRender(false), 0); + } }, []); + + useEffect(() => { + + storeTableSettings.isRenderStyles ? setLoaderSkeleton(true) : setLoaderSkeleton(false); + + }, [storeTableSettings.isRenderStyles]); + return (
    - {styles.map((style, index) => { + { stateLoaderSkeleton ? + Array.from({ length: 31 }).map((item,index) => ( +
  • + + + + +
    • + )) : + styles.map((style, index) => { return (
    • ) - })} + }) + }
- {storeTableSettings.isRenderStyles && onReadyStyles()}
) })); @@ -226,19 +243,13 @@ const PageStyleOptions = props => { useEffect(() => { prevStateRef.current = [...nextStateRef.current]; - return () => { - if (!(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) { - props.storeTableSettings.resetFlagRender(true); - } - } }, []); const openIndicator = () => { if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) { - $$('.table-styles').hide(); - f7.preloader.showIn('.preload'); - props.onGetTableStylesPreviews(); + props.onGetTableStylesPreviews(); } + setTimeout(() => props.storeTableSettings.resetFlagRender(false), 10); } return ( @@ -503,11 +514,6 @@ const PageStyle = props => { return null; } - const onReadyStyles = () => { - f7.preloader.hideIn('.preload'); - $$('.table-styles').show(); - } - return ( @@ -529,8 +535,7 @@ const PageStyle = props => { -
- + diff --git a/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx b/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx index a7097e60b..5df6ac09e 100644 --- a/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx +++ b/apps/presentationeditor/mobile/src/controller/add/AddOther.jsx @@ -94,11 +94,11 @@ class AddOtherController extends Component { onGetTableStylesPreviews = () => { const api = Common.EditorApi.get(); - if (this.props.storeTableSettings.isRenderStyles) { - $$('.table-styles').hide(); - f7.preloader.showIn('.preload'); - setTimeout(() => this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)) , 10); - this.props.storeTableSettings.resetFlagRender(false); + if(this.props.storeTableSettings.isRenderStyles) { + setTimeout(() => { + this.props.storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true)); + this.props.storeTableSettings.resetFlagRender(false); + },5); } } diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index 19b7a9bb8..db49b52a4 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -84,15 +84,6 @@ } } -#edit-table-style, #add-table { - .preloader-modal { - background-color: transparent; - .preloader { - --f7-preloader-color: var(--f7-theme-color-shade); - } - } -} - .item-content { .preview{ color: @gray; @@ -108,3 +99,12 @@ .swiper-pagination-bullet-active{ background: @black; } + +// Skeleton table + +.table-styles .row div:not(:first-child) { + margin: 6px auto 0px; +} +.table-styles .row .skeleton-list{ + display: block; +} diff --git a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx index 77fd2f028..3f74135be 100644 --- a/apps/presentationeditor/mobile/src/view/add/AddOther.jsx +++ b/apps/presentationeditor/mobile/src/view/add/AddOther.jsx @@ -1,6 +1,6 @@ -import React, {useState} from 'react'; +import React, {useState, useEffect} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle, Segmented, Button} from 'framework7-react'; +import {f7, List, ListItem, Page, Navbar, Icon,SkeletonBlock, ListButton, ListInput, BlockTitle, Segmented, Button} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from "../../../../../common/mobile/utils/device"; @@ -10,28 +10,38 @@ const PageTable = props => { const _t = t('View.Add', {returnObjects: true}); const storeTableSettings = props.storeTableSettings; const styles = storeTableSettings.arrayStyles; + const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true); - const onReadyStyles = () => { - f7.preloader.hideIn('.preload'); - $$('.table-styles').show(); - } + useEffect(() => { + + if(!storeTableSettings.isRenderStyles) setLoaderSkeleton(false); + + }, [storeTableSettings.isRenderStyles]); return ( -
    - {styles.map((style, index) => { + {stateLoaderSkeleton ? + Array.from({ length: 31 }).map((item,index) => ( +
  • + + + + +
    • + )) : + styles.map((style, index) => { return (
  • {props.onStyleClick(style.templateId)}}>
    • ) - })} + }) + }
- {onReadyStyles()}
) diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx index 69838bc8e..993505773 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx @@ -1,25 +1,34 @@ import React, {Fragment, useState, useEffect, useRef} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react'; +import {f7, Page, Navbar, List, ListItem, ListButton, Row, BlockTitle,SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; // Style -const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick, onReadyStyles, onGetTableStylesPreviews, storeTableSettings,storeFocusObjects}) => { +const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer(({onStyleClick, onGetTableStylesPreviews, storeTableSettings,storeFocusObjects}) => { const tableObject = storeFocusObjects.tableObject; const styleId = tableObject ? tableObject.get_TableStyle() : null; const [stateId, setId] = useState(styleId); + const [stateLoaderSkeleton, setLoaderSkeleton] = useState(true); const styles = storeTableSettings.arrayStyles; useEffect(() => { if (storeTableSettings.isRenderStyles) { - onGetTableStylesPreviews(); - storeTableSettings.resetFlagRender(false); - } + setTimeout(() => { + onGetTableStylesPreviews(); + storeTableSettings.resetFlagRender(false); + },0); + } }, []); + useEffect(() => { + + storeTableSettings.isRenderStyles ? setLoaderSkeleton(true) : setLoaderSkeleton(false); + + }, [storeTableSettings.isRenderStyles]); + if (!tableObject && Device.phone) { $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); return null; @@ -28,7 +37,16 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer return (
    - {styles.map((style, index) => { + { stateLoaderSkeleton ? + Array.from({ length: 31 }).map((item,index) => ( +
  • + + + + +
    • + )) : + styles.map((style, index) => { return (
  • - {storeTableSettings.isRenderStyles && onReadyStyles()}
) })); @@ -65,20 +82,13 @@ const PageStyleOptions = props => { useEffect(() => { prevStateRef.current = [...nextStateRef.current]; - - return () => { - if (!(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) { - props.storeTableSettings.resetFlagRender(true); - } - } }, []); const openIndicator = () => { if ( !(prevStateRef.current.every((item, index) => item === nextStateRef.current[index]))) { - $$('.table-styles').hide(); - f7.preloader.showIn('.preload'); - props.onGetTableStylesPreviews(); + setTimeout (() => props.onGetTableStylesPreviews(),0); } + setTimeout(() => props.storeTableSettings.resetFlagRender(false), 0); } return ( @@ -343,11 +353,6 @@ const PageStyle = props => { const _t = t('View.Edit', {returnObjects: true}); const isAndroid = Device.android; - const onReadyStyles = () => { - f7.preloader.hideIn('.preload'); - $$('.table-styles').show(); - } - return ( @@ -370,7 +375,7 @@ const PageStyle = props => {
- +