fix(dots): fix loading indicator

Author: minheq

src/components/Button/Button.tsx

@@ -10,7 +10,7 @@ import { DeepPartial } from 'ts-essentials';
 
 import { ButtonColor, ControlSize, useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
-import { LoadingDots } from '../Loading';
+import { Dots } from '../LoadingIndicators';
 import { Text } from '../Typography';
 import {
   ButtonAppearance,
@@ -178,7 +178,7 @@ export interface ButtonContentProps extends ButtonProps {
 const ButtonContent = (props: ButtonContentProps) => {
   const { isLoading, iconLoading, icon, title, textStyle, size } = props;
 
-  if (isLoading) return iconLoading || <LoadingDots color={textStyle.color} />;
+  if (isLoading) return iconLoading || <Dots color={textStyle.color} />;
   if (icon) return icon;
   if (title) {
     return (

src/components/Loading/index.ts

@@ -2,29 +2,31 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { animated, useTrail } from 'react-spring/native.cjs';
 
+import { useForceUpdate } from '../../hooks';
+import { useTheme } from '../../theme';
+
 const AnimatedView = animated(View);
 
-export interface LoadingDotsProps {
+export interface DotsProps {
   color?: string;
   size?: number;
 }
 
-const items = ['1', '2', '3'];
-
-export const LoadingDots = (props: LoadingDotsProps) => {
-  const { size = 10, color = '#aaa' } = props;
+export const Dots = (props: DotsProps) => {
+  const theme = useTheme();
+  const { size = 10, color = theme.colors.text.primary } = props;
+  const forceUpdate = useForceUpdate();
 
-  const trail = useTrail(items.length, {
+  const trail = useTrail(3, {
     config: { duration: 800 },
     from: { opacity: 0 },
+    onRest: forceUpdate,
     reset: true,
     to: async next => {
-      while (true) {
-        // tslint:disable-next-line
-        await next({ opacity: 1 });
-        // tslint:disable-next-line
-        await next({ opacity: 0 });
-      }
+      // tslint:disable-next-line
+      await next({ opacity: 1 });
+      // tslint:disable-next-line
+      await next({ opacity: 0 });
     },
   });
 
@@ -38,7 +40,7 @@ export const LoadingDots = (props: LoadingDotsProps) => {
     >
       {trail.map((style, index) => (
         <AnimatedView
-          key={items[index]}
+          key={index}
           // @ts-ignore
           style={{
             backgroundColor: color,

src/components/Loading/LoadingDots.tsx src/components/LoadingIndicators/Dots.tsxsrc/components/Loading/LoadingDots.tsx renamed to src/components/LoadingIndicators/Dots.tsx

@@ -0,0 +1 @@
+export * from './Dots';

src/components/LoadingIndicators/index.ts

@@ -16,7 +16,7 @@ export * from './Icon';
 export * from './Inputs';
 export * from './KitchenSink';
 export * from './ListItem';
-export * from './Loading';
+export * from './LoadingIndicators';
 export * from './Modal';
 export * from './Overlay';
 export * from './Pickers';

src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './usePrevious';
 export * from './useMeasure';
+export * from './useForceUpdate';
 export * from './useElement';
 export * from './useLockBodyScroll';

src/hooks/index.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const reducer = (state: boolean, action: null): boolean => !state;
+
+export const useForceUpdate = () => {
+  const [, dispatch] = React.useReducer(reducer, true);
+
+  // Turn dispatch(required_parameter) into dispatch().
+  return React.useCallback(() => {
+    dispatch(null);
+  }, [dispatch]);
+};