refactor(client): loader to TypeScript

client/src/client-only-routes/ShowProfileOrFourOhFour.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { isEmpty } from 'lodash-es';
 
-import Loader from '../components/helpers/Loader';
+import Loader from '../components/helpers/loader';
 import {
   userByNameSelector,
   userProfileFetchStateSelector,

client/src/components/helpers/index.js

@@ -1,7 +1,7 @@
 export { default as ButtonSpacer } from './ButtonSpacer';
 export { default as FullWidthRow } from './FullWidthRow';
 export { default as SlimWidthRow } from './slim-width-row';
-export { default as Loader } from './Loader';
+export { default as Loader } from './loader';
 export { default as SkeletonSprite } from './skeleton-sprite';
 export { default as Spacer } from './spacer';
 export { default as Link } from './Link';

client/src/components/helpers/loader.test.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 
-import Loader from './Loader';
+import Loader from './loader';
 
 describe('<Loader />', () => {
   afterEach(cleanup);

client/src/components/helpers/loader.tsx

@@ -1,13 +1,16 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import Spinner from 'react-spinkit';
 
 import './loader.css';
 
-function Loader({ fullScreen, timeout }) {
+interface LoaderProps {
+  fullScreen?: boolean;
+  timeout?: number;
+}
+function Loader({ fullScreen, timeout }: LoaderProps): JSX.Element {
   const [showSpinner, setShowSpinner] = useState(!timeout);
   useEffect(() => {
-    let timerId;
+    let timerId: ReturnType<typeof setTimeout>;
     if (!showSpinner) {
       timerId = setTimeout(() => setShowSpinner(true), timeout);
     }
@@ -21,9 +24,5 @@ function Loader({ fullScreen, timeout }) {
 }
 
 Loader.displayName = 'Loader';
-Loader.propTypes = {
-  fullScreen: PropTypes.bool,
-  timeout: PropTypes.number
-};
 
 export default Loader;

client/src/templates/Challenges/video/Show.js

@@ -20,7 +20,7 @@ import ChallengeDescription from '../components/Challenge-Description';
 import Spacer from '../../../components/helpers/spacer';
 import CompletionModal from '../components/CompletionModal';
 import Hotkeys from '../components/Hotkeys';
-import Loader from '../../../components/helpers/Loader';
+import Loader from '../../../components/helpers/loader';
 import {
   isChallengeCompletedSelector,
   challengeMounted,