about summary refs log tree commit diff
path: root/app/javascript/mastodon/components/loading_indicator.js
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2022-02-09 01:17:07 +0100
committerGitHub <noreply@github.com>2022-02-09 01:17:07 +0100
commitfd3a45e3482e86dad3c1dfc069144864c4ff0b0b (patch)
tree41d497599cf1ecb35f9f2e278b67c90e3a850a46 /app/javascript/mastodon/components/loading_indicator.js
parent2adcad04ff96fc8e7cb9aeefef1b22ea38e65457 (diff)
Add edit history to web UI (#17390)
* Add edit history to web UI

* Change history reducer to store items per status

* Fix missing loading prop
Diffstat (limited to 'app/javascript/mastodon/components/loading_indicator.js')
-rw-r--r--app/javascript/mastodon/components/loading_indicator.js27
1 files changed, 24 insertions, 3 deletions
diff --git a/app/javascript/mastodon/components/loading_indicator.js b/app/javascript/mastodon/components/loading_indicator.js
index d6a5adb6f..59f721c50 100644
--- a/app/javascript/mastodon/components/loading_indicator.js
+++ b/app/javascript/mastodon/components/loading_indicator.js
@@ -1,10 +1,31 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+
+export const CircularProgress = ({ size, strokeWidth }) => {
+  const viewBox = `0 0 ${size} ${size}`;
+  const radius  = (size - strokeWidth) / 2;
+
+  return (
+    <svg width={size} heigh={size} viewBox={viewBox} className='circular-progress' role='progressbar'>
+      <circle
+        fill='none'
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        strokeWidth={`${strokeWidth}px`}
+      />
+    </svg>
+  );
+};
+
+CircularProgress.propTypes = {
+  size: PropTypes.number.isRequired,
+  strokeWidth: PropTypes.number.isRequired,
+};
 
 const LoadingIndicator = () => (
   <div className='loading-indicator'>
-    <div className='loading-indicator__figure' />
-    <FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />
+    <CircularProgress size={50} strokeWidth={6} />
   </div>
 );