Merge pull request #30458 from hungvu193/fix-29508

Fix skeleton animation on web

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',
 
  // Module alias for web & desktop

src/components/CurrentUserPersonalDetailsSkeletonView/index.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import SkeletonViewContentLoader from 'react-content-loader/native';
 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';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';

src/components/MoneyRequestSkeletonView.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import SkeletonViewContentLoader from 'react-content-loader/native';
 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 './SkeletonViewContentLoader';
 
 function MoneyRequestSkeletonView() {
  return (

src/components/OptionsListSkeletonView.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import SkeletonViewContentLoader from 'react-content-loader/native';
 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 */

src/components/ReportActionsSkeletonView/SkeletonViewLines.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import SkeletonViewContentLoader from 'react-content-loader/native';
 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';

src/components/ReportHeaderSkeletonView.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import SkeletonViewContentLoader from 'react-content-loader/native';
 import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import compose from '@libs/compose';
@@ -11,6 +10,7 @@ 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';
 

src/components/SkeletonViewContentLoader/index.js

@@ -0,0 +1,3 @@
+import SkeletonViewContentLoader from 'react-content-loader';
+
+export default SkeletonViewContentLoader;

src/components/SkeletonViewContentLoader/index.native.js

@@ -0,0 +1,3 @@
+import SkeletonViewContentLoader from 'react-content-loader/native';
+
+export default SkeletonViewContentLoader;