diff --git a/app/javascript/mastodon/components/admin/Counter.jsx b/app/javascript/mastodon/components/admin/Counter.jsx index 5a5b2b869e078e099e81b7c6dc4ecec8df08bcbf..569f8628a9b52d6b4f49de68ec422aa570ce9c76 100644 --- a/app/javascript/mastodon/components/admin/Counter.jsx +++ b/app/javascript/mastodon/components/admin/Counter.jsx @@ -4,7 +4,7 @@ import api from 'mastodon/api'; import { FormattedNumber } from 'react-intl'; import { Sparklines, SparklinesCurve } from 'react-sparklines'; import classNames from 'classnames'; -import Skeleton from 'mastodon/components/skeleton'; +import { Skeleton } from 'mastodon/components/skeleton'; const percIncrease = (a, b) => { let percent; diff --git a/app/javascript/mastodon/components/admin/Dimension.jsx b/app/javascript/mastodon/components/admin/Dimension.jsx index 977c8208df18c4307791e0fb8a74d0bd273a26c5..3005c15ae9c3f88f73a3e91941cfda0c93ecc949 100644 --- a/app/javascript/mastodon/components/admin/Dimension.jsx +++ b/app/javascript/mastodon/components/admin/Dimension.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import api from 'mastodon/api'; import { FormattedNumber } from 'react-intl'; import { roundTo10 } from 'mastodon/utils/numbers'; -import Skeleton from 'mastodon/components/skeleton'; +import { Skeleton } from 'mastodon/components/skeleton'; export default class Dimension extends React.PureComponent { diff --git a/app/javascript/mastodon/components/display_name.tsx b/app/javascript/mastodon/components/display_name.tsx index ce435066d663acfa02208f395f807296ab2a1be5..c537cd24ce08163ec96c59f8815d05ad40b6d07a 100644 --- a/app/javascript/mastodon/components/display_name.tsx +++ b/app/javascript/mastodon/components/display_name.tsx @@ -5,7 +5,7 @@ import type { List } from 'immutable'; import type { Account } from '../../types/resources'; import { autoPlayGif } from '../initial_state'; -import Skeleton from './skeleton'; +import { Skeleton } from './skeleton'; interface Props { account?: Account; diff --git a/app/javascript/mastodon/components/empty_account.tsx b/app/javascript/mastodon/components/empty_account.tsx index 3adb5b20f8ecb580003c3fb3ab809506f04a32e7..a4a6b7f823b9f1222dda6d6e31f50c1a2006a130 100644 --- a/app/javascript/mastodon/components/empty_account.tsx +++ b/app/javascript/mastodon/components/empty_account.tsx @@ -3,7 +3,7 @@ import React from 'react'; import classNames from 'classnames'; import { DisplayName } from 'mastodon/components/display_name'; -import Skeleton from 'mastodon/components/skeleton'; +import { Skeleton } from 'mastodon/components/skeleton'; interface Props { size?: number; diff --git a/app/javascript/mastodon/components/hashtag.jsx b/app/javascript/mastodon/components/hashtag.jsx index d03b1a45a7692b7c7269f46fa730691888a1b4a2..3efd679a52807302d3caccfa7eccadf9fa97bbba 100644 --- a/app/javascript/mastodon/components/hashtag.jsx +++ b/app/javascript/mastodon/components/hashtag.jsx @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { Link } from 'react-router-dom'; import ShortNumber from 'mastodon/components/short_number'; -import Skeleton from 'mastodon/components/skeleton'; +import { Skeleton } from 'mastodon/components/skeleton'; import classNames from 'classnames'; class SilentErrorBoundary extends React.Component { diff --git a/app/javascript/mastodon/components/server_banner.jsx b/app/javascript/mastodon/components/server_banner.jsx index 9669decc850afd0263ba4775cc5d7bced536bc39..6c3abd5b6f3c67545857a3eb3b89992184e10565 100644 --- a/app/javascript/mastodon/components/server_banner.jsx +++ b/app/javascript/mastodon/components/server_banner.jsx @@ -4,7 +4,7 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import { fetchServer } from 'mastodon/actions/server'; import ShortNumber from 'mastodon/components/short_number'; -import Skeleton from 'mastodon/components/skeleton'; +import { Skeleton } from 'mastodon/components/skeleton'; import Account from 'mastodon/containers/account_container'; import { domain } from 'mastodon/initial_state'; import { ServerHeroImage } from 'mastodon/components/server_hero_image'; diff --git a/app/javascript/mastodon/components/skeleton.jsx b/app/javascript/mastodon/components/skeleton.jsx deleted file mode 100644 index 6a17ffb261ef16a5d7262bc450f8969959e0bf58..0000000000000000000000000000000000000000 --- a/app/javascript/mastodon/components/skeleton.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const Skeleton = ({ width, height }) => <span className='skeleton' style={{ width, height }}>‌</span>; - -Skeleton.propTypes = { - width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), -}; - -export default Skeleton; diff --git a/app/javascript/mastodon/components/skeleton.tsx b/app/javascript/mastodon/components/skeleton.tsx new file mode 100644 index 0000000000000000000000000000000000000000..8d43e6827d17df6fd37402d1bff115998b0d3d9a --- /dev/null +++ b/app/javascript/mastodon/components/skeleton.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +interface Props { + width?: number | string; + height?: number | string; +} + +export const Skeleton: React.FC<Props> = ({ width, height }) => ( + <span className='skeleton' style={{ width, height }}> + ‌ + </span> +); diff --git a/app/javascript/mastodon/features/about/index.jsx b/app/javascript/mastodon/features/about/index.jsx index f025a9633a9b83fa814c5507fd453e0d90bcd9ad..61a9180a107e83a82c63a40e589be0948bbb311b 100644 --- a/app/javascript/mastodon/features/about/index.jsx +++ b/app/javascript/mastodon/features/about/index.jsx @@ -8,7 +8,7 @@ import LinkFooter from 'mastodon/features/ui/components/link_footer'; import { Helmet } from 'react-helmet'; import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'mastodon/actions/server'; import Account from 'mastodon/containers/account_container'; -import Skeleton from 'mastodon/components/skeleton'; +import { Skeleton } from 'mastodon/components/skeleton'; import { Icon } from 'mastodon/components/icon'; import classNames from 'classnames'; import { ServerHeroImage } from 'mastodon/components/server_hero_image'; diff --git a/app/javascript/mastodon/features/explore/components/story.jsx b/app/javascript/mastodon/features/explore/components/story.jsx index c7320c886d6a030f6f5a117746f8f9ee1ec4b259..6e8db62307cc2345faabf0c67b356621987e57fb 100644 --- a/app/javascript/mastodon/features/explore/components/story.jsx +++ b/app/javascript/mastodon/features/explore/components/story.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { Blurhash } from 'mastodon/components/blurhash'; import { accountsCountRenderer } from 'mastodon/components/hashtag'; import ShortNumber from 'mastodon/components/short_number'; -import Skeleton from 'mastodon/components/skeleton'; +import { Skeleton } from 'mastodon/components/skeleton'; import classNames from 'classnames'; export default class Story extends React.PureComponent { diff --git a/app/javascript/mastodon/features/privacy_policy/index.jsx b/app/javascript/mastodon/features/privacy_policy/index.jsx index d5bbda6a33967ccbe720fc132c750e7b20a34393..07a691498937430f5e034235e322a7db3c2e60c1 100644 --- a/app/javascript/mastodon/features/privacy_policy/index.jsx +++ b/app/javascript/mastodon/features/privacy_policy/index.jsx @@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet'; import { FormattedMessage, FormattedDate, injectIntl, defineMessages } from 'react-intl'; import Column from 'mastodon/components/column'; import api from 'mastodon/api'; -import Skeleton from 'mastodon/components/skeleton'; +import { Skeleton } from 'mastodon/components/skeleton'; const messages = defineMessages({ title: { id: 'privacy_policy.title', defaultMessage: 'Privacy Policy' },