From a97a4a2478eabf6211456ec5b95c0025f135c3c2 Mon Sep 17 00:00:00 2001 From: Hans Date: Fri, 27 Oct 2023 00:37:01 +0700 Subject: [PATCH 1/2] fix skeleton animation on web --- config/webpack/webpack.common.js | 1 - src/components/CurrentUserPersonalDetailsSkeletonView/index.js | 2 +- src/components/MoneyRequestSkeletonView.js | 2 +- src/components/OptionsListSkeletonView.js | 2 +- src/components/ReportActionsSkeletonView/SkeletonViewLines.js | 2 +- src/components/ReportHeaderSkeletonView.js | 2 +- src/components/SkeletonViewContentLoader/index.js | 3 +++ src/components/SkeletonViewContentLoader/index.native.js | 3 +++ 8 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 src/components/SkeletonViewContentLoader/index.js create mode 100644 src/components/SkeletonViewContentLoader/index.native.js diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js index d8a24adefdc3..48983eddba39 100644 --- a/config/webpack/webpack.common.js +++ b/config/webpack/webpack.common.js @@ -187,7 +187,6 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({ 'react-native-config': 'react-web-config', 'react-native$': '@expensify/react-native-web', 'react-native-web': '@expensify/react-native-web', - 'react-content-loader/native': 'react-content-loader', 'lottie-react-native': 'react-native-web-lottie', }, diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js index cc305a628820..da9bb4cbc6f5 100644 --- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js +++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import _ from 'underscore'; -import SkeletonViewContentLoader from 'react-content-loader/native'; import {Circle, Rect} from 'react-native-svg'; import {View} from 'react-native'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -9,6 +8,7 @@ import CONST from '../../CONST'; import themeColors from '../../styles/themes/default'; import variables from '../../styles/variables'; import styles from '../../styles/styles'; +import SkeletonViewContentLoader from '../SkeletonViewContentLoader'; const propTypes = { /** Whether to animate the skeleton view */ diff --git a/src/components/MoneyRequestSkeletonView.js b/src/components/MoneyRequestSkeletonView.js index 50a7b56b91e3..f94274975fd3 100644 --- a/src/components/MoneyRequestSkeletonView.js +++ b/src/components/MoneyRequestSkeletonView.js @@ -1,9 +1,9 @@ import React from 'react'; import {Rect} from 'react-native-svg'; -import SkeletonViewContentLoader from 'react-content-loader/native'; import variables from '../styles/variables'; import themeColors from '../styles/themes/default'; import styles from '../styles/styles'; +import SkeletonViewContentLoader from './SkeletonViewContentLoader'; function MoneyRequestSkeletonView() { return ( diff --git a/src/components/OptionsListSkeletonView.js b/src/components/OptionsListSkeletonView.js index 15c66affe84d..7dd5f717f93f 100644 --- a/src/components/OptionsListSkeletonView.js +++ b/src/components/OptionsListSkeletonView.js @@ -2,10 +2,10 @@ import React from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import {Rect, Circle} from 'react-native-svg'; -import SkeletonViewContentLoader from 'react-content-loader/native'; import CONST from '../CONST'; import themeColors from '../styles/themes/default'; import styles from '../styles/styles'; +import SkeletonViewContentLoader from './SkeletonViewContentLoader'; const propTypes = { /** Whether to animate the skeleton view */ diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index e4432ceb2309..ae68d1bbf89a 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -1,10 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import {Rect, Circle} from 'react-native-svg'; -import SkeletonViewContentLoader from 'react-content-loader/native'; import CONST from '../../CONST'; import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; +import SkeletonViewContentLoader from '../SkeletonViewContentLoader'; const propTypes = { /** Number of rows to show in Skeleton UI block */ diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js index 5f2d5379419d..ec5f6697ef0f 100644 --- a/src/components/ReportHeaderSkeletonView.js +++ b/src/components/ReportHeaderSkeletonView.js @@ -1,7 +1,6 @@ import React from 'react'; import {View} from 'react-native'; import {Rect, Circle} from 'react-native-svg'; -import SkeletonViewContentLoader from 'react-content-loader/native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; import Icon from './Icon'; @@ -13,6 +12,7 @@ import PressableWithFeedback from './Pressable/PressableWithFeedback'; import compose from '../libs/compose'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import CONST from '../CONST'; +import SkeletonViewContentLoader from './SkeletonViewContentLoader'; const propTypes = { ...windowDimensionsPropTypes, diff --git a/src/components/SkeletonViewContentLoader/index.js b/src/components/SkeletonViewContentLoader/index.js new file mode 100644 index 000000000000..335611c6f5cb --- /dev/null +++ b/src/components/SkeletonViewContentLoader/index.js @@ -0,0 +1,3 @@ +import SkeletonViewContentLoader from 'react-content-loader'; + +export default SkeletonViewContentLoader; diff --git a/src/components/SkeletonViewContentLoader/index.native.js b/src/components/SkeletonViewContentLoader/index.native.js new file mode 100644 index 000000000000..bdcea964e52c --- /dev/null +++ b/src/components/SkeletonViewContentLoader/index.native.js @@ -0,0 +1,3 @@ +import SkeletonViewContentLoader from 'react-content-loader/native'; + +export default SkeletonViewContentLoader; From de3bd56392d84359931cbba77efd572042735914 Mon Sep 17 00:00:00 2001 From: Hans Date: Sun, 29 Oct 2023 15:28:39 +0700 Subject: [PATCH 2/2] fix linting --- .../CurrentUserPersonalDetailsSkeletonView/index.js | 7 +++---- src/components/MoneyRequestSkeletonView.js | 2 +- src/components/OptionsListSkeletonView.js | 9 ++++----- .../ReportActionsSkeletonView/SkeletonViewLines.js | 5 ++--- src/components/ReportHeaderSkeletonView.js | 11 +++++------ 5 files changed, 15 insertions(+), 19 deletions(-) diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js index 94bca720dbd0..d56153cce1d3 100644 --- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js +++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { View } from 'react-native'; -import { Circle, Rect } from 'react-native-svg'; +import {View} from 'react-native'; +import {Circle, Rect} from 'react-native-svg'; import _ from 'underscore'; import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader'; import styles from '@styles/styles'; @@ -10,7 +10,6 @@ import themeColors from '@styles/themes/default'; import variables from '@styles/variables'; import CONST from '@src/CONST'; - const propTypes = { /** Whether to animate the skeleton view */ shouldAnimate: PropTypes.bool, @@ -72,4 +71,4 @@ function CurrentUserPersonalDetailsSkeletonView(props) { CurrentUserPersonalDetailsSkeletonView.displayName = 'CurrentUserPersonalDetailsSkeletonView'; CurrentUserPersonalDetailsSkeletonView.propTypes = propTypes; CurrentUserPersonalDetailsSkeletonView.defaultProps = defaultProps; -export default CurrentUserPersonalDetailsSkeletonView; \ No newline at end of file +export default CurrentUserPersonalDetailsSkeletonView; diff --git a/src/components/MoneyRequestSkeletonView.js b/src/components/MoneyRequestSkeletonView.js index 7ac1640f1ebc..32eb8fef222b 100644 --- a/src/components/MoneyRequestSkeletonView.js +++ b/src/components/MoneyRequestSkeletonView.js @@ -3,7 +3,7 @@ import {Rect} from 'react-native-svg'; import styles from '@styles/styles'; import themeColors from '@styles/themes/default'; import variables from '@styles/variables'; -import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader'; +import SkeletonViewContentLoader from './SkeletonViewContentLoader'; function MoneyRequestSkeletonView() { return ( diff --git a/src/components/OptionsListSkeletonView.js b/src/components/OptionsListSkeletonView.js index 4b014121b9e7..24783604e39a 100644 --- a/src/components/OptionsListSkeletonView.js +++ b/src/components/OptionsListSkeletonView.js @@ -1,12 +1,11 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { View } from 'react-native'; -import { Circle, Rect } from 'react-native-svg'; -import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader'; +import {View} from 'react-native'; +import {Circle, Rect} from 'react-native-svg'; import styles from '@styles/styles'; import themeColors from '@styles/themes/default'; import CONST from '@src/CONST'; - +import SkeletonViewContentLoader from './SkeletonViewContentLoader'; const propTypes = { /** Whether to animate the skeleton view */ @@ -109,4 +108,4 @@ class OptionsListSkeletonView extends React.Component { OptionsListSkeletonView.propTypes = propTypes; OptionsListSkeletonView.defaultProps = defaultTypes; -export default OptionsListSkeletonView; \ No newline at end of file +export default OptionsListSkeletonView; diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index 15d05ff2f30b..51ae4c1034a5 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -1,12 +1,11 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { Circle, Rect } from 'react-native-svg'; +import {Circle, Rect} from 'react-native-svg'; import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader'; import styles from '@styles/styles'; import themeColors from '@styles/themes/default'; import CONST from '@src/CONST'; - const propTypes = { /** Number of rows to show in Skeleton UI block */ numberOfRows: PropTypes.number.isRequired, @@ -66,4 +65,4 @@ function SkeletonViewLines(props) { SkeletonViewLines.displayName = 'SkeletonViewLines'; SkeletonViewLines.propTypes = propTypes; SkeletonViewLines.defaultProps = defaultTypes; -export default SkeletonViewLines; \ No newline at end of file +export default SkeletonViewLines; diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js index 56d022bca151..6d2a8e343e3b 100644 --- a/src/components/ReportHeaderSkeletonView.js +++ b/src/components/ReportHeaderSkeletonView.js @@ -1,8 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { View } from 'react-native'; -import { Circle, Rect } from 'react-native-svg'; -import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader'; +import {View} from 'react-native'; +import {Circle, Rect} from 'react-native-svg'; import compose from '@libs/compose'; import styles from '@styles/styles'; import themeColors from '@styles/themes/default'; @@ -11,9 +10,9 @@ import CONST from '@src/CONST'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; +import SkeletonViewContentLoader from './SkeletonViewContentLoader'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import withWindowDimensions, { windowDimensionsPropTypes } from './withWindowDimensions'; - +import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; const propTypes = { ...windowDimensionsPropTypes, @@ -72,4 +71,4 @@ function ReportHeaderSkeletonView(props) { ReportHeaderSkeletonView.propTypes = propTypes; ReportHeaderSkeletonView.defaultProps = defaultProps; ReportHeaderSkeletonView.displayName = 'ReportHeaderSkeletonView'; -export default compose(withWindowDimensions, withLocalize)(ReportHeaderSkeletonView); \ No newline at end of file +export default compose(withWindowDimensions, withLocalize)(ReportHeaderSkeletonView);