@tactics/toddle-styleguide 1.0.1 → 1.0.2

package/App.tsx

@@ -62,6 +62,7 @@ import {SelectLinkPreview} from './src/components/molecules/select-link/select-l
 import {MoreInfoButtonPreview} from './src/components/molecules/more-info-button/more-info-button.preview';
 import {LanguageButtonPreview} from './src/components/molecules/language-button/language-button.preview';
 import {ModalPreview} from './src/components/templates/modal/modal.preview';
+import {LoadingIndicatorPreview} from './src/components/organisms/loading-indicator/loading-indicator.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -235,6 +236,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         onPress={() => navigation.push('language-button')}
       />
       <ReactBtn title="Modal" onPress={() => navigation.push('modal')} />
+      <ReactBtn
+        title="Loading indicator"
+        onPress={() => navigation.push('loading-indicator')}
+      />
     </ScrollView>
   );
 };
@@ -384,6 +389,9 @@ function App() {
             {() => <LanguageButtonPreview />}
           </Stack.Screen>
           <Stack.Screen name="modal">{() => <ModalPreview />}</Stack.Screen>
+          <Stack.Screen name="loading-indicator" options={{headerShown: false}}>
+            {() => <LoadingIndicatorPreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.d.ts

@@ -48,6 +48,7 @@ import { MyChildListItem } from './src/components/organisms/my-child-list-item/m
 import { MoreInfoButton } from './src/components/molecules/more-info-button/more-info-button.component';
 import { LanguageButton } from './src/components/molecules/language-button/language-button.component';
 import { Modal } from './src/components/templates/modal/modal.component';
+import { LoadingIndicator } from './src/components/organisms/loading-indicator/loading-indicator.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -56,4 +57,4 @@ import { Initials } from './src/models/initials.model';
 import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.class';
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
-export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, VisualState, ThemeCtx, ToddleDateTime, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, MoreInfoButton, LanguageButton, Modal, };
+export { Initials, BubbleAlignment, KeyBoardTypes, Size, Scale, VisualState, ThemeCtx, ToddleDateTime, Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, SplitContainer, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, Search, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton, Icon, Calendar, IncrementInput, Swipe, Logo, DaySelect, BlockedMessage, DepartmentLogo, ContactRole, Timeline, SelectPicker, CalendarSelect, DateInput, FilterRange, Footer, DefaultSelect, PasswordInput, MessageInput, Heading1, Heading2, Heading3, Heading4, AllCapsHeading, Paragraph, SmallText, TinyText, SelectLink, MyChildListItem, MoreInfoButton, LanguageButton, Modal, LoadingIndicator, };

package/index.tsx

@@ -66,6 +66,7 @@ import {MyChildListItem} from './src/components/organisms/my-child-list-item/my-
 import {MoreInfoButton} from './src/components/molecules/more-info-button/more-info-button.component';
 import {LanguageButton} from './src/components/molecules/language-button/language-button.component';
 import {Modal} from './src/components/templates/modal/modal.component';
+import {LoadingIndicator} from './src/components/organisms/loading-indicator/loading-indicator.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -148,4 +149,5 @@ export {
   MoreInfoButton,
   LanguageButton,
   Modal,
+  LoadingIndicator,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/atoms/calendar/__snapshots__/calendar.test.js.snap

@@ -1700,7 +1700,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 17 Februari 2023 "
+            accessibilityLabel=" Vrijdag 17 Februari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -1720,10 +1720,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -1743,9 +1739,6 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
-                  {
-                    "color": "#7B93DB",
-                  },
                 ]
               }
             >
@@ -2417,7 +2410,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 27 Februari 2023 "
+            accessibilityLabel="today Maandag 27 Februari 2023 "
             accessibilityRole="button"
             accessibilityState={
               {
@@ -2437,6 +2430,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -2456,6 +2453,9 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "lineHeight": 22.4,
                     "marginTop": 4,
                   },
+                  {
+                    "color": "#7B93DB",
+                  },
                 ]
               }
             >
@@ -4639,8 +4639,7 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel="today Vrijdag 17 Februari 2023 "
-            accessibilityRole="button"
+            accessibilityLabel=" Vrijdag 17 Februari 2023 "
             accessibilityState={
               {
                 "disabled": false,
@@ -4659,10 +4658,6 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
-                "borderColor": "#7B93DB",
-                "borderRadius": 21,
-                "borderStyle": "solid",
-                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -4683,7 +4678,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#7B93DB",
+                    "color": "#9AA5B1",
                   },
                 ]
               }
@@ -5374,7 +5369,8 @@ exports[`Test for the calendar component renders a calendar where you can select
           }
         >
           <View
-            accessibilityLabel=" Maandag 27 Februari 2023 "
+            accessibilityLabel="today Maandag 27 Februari 2023 "
+            accessibilityRole="button"
             accessibilityState={
               {
                 "disabled": false,
@@ -5393,6 +5389,10 @@ exports[`Test for the calendar component renders a calendar where you can select
             style={
               {
                 "alignItems": "center",
+                "borderColor": "#7B93DB",
+                "borderRadius": 21,
+                "borderStyle": "solid",
+                "borderWidth": 1,
                 "height": 42,
                 "justifyContent": "center",
                 "opacity": 1,
@@ -5413,7 +5413,7 @@ exports[`Test for the calendar component renders a calendar where you can select
                     "marginTop": 4,
                   },
                   {
-                    "color": "#9AA5B1",
+                    "color": "#7B93DB",
                   },
                 ]
               }

package/src/components/organisms/loading-indicator/__snapshots__/loading-indicator.test.js.snap

@@ -0,0 +1,474 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loading indicator test should render a default loading indicator 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`loading indicator test should render a flashing loading indicator with a dot size of 12px 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 12,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 12,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 12,
+          "opacity": 12,
+          "position": "absolute",
+          "width": 12,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 12,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 12,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 12,
+          "opacity": 12,
+          "position": "absolute",
+          "width": 12,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 12,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 12,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 12,
+          "opacity": 12,
+          "position": "absolute",
+          "width": 12,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`loading indicator test should render a ping loading indicator with a size of 14px and a spacing of 4px 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 14,
+        "justifyContent": "center",
+        "margin": 4,
+        "width": 14,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 14,
+          "opacity": 1,
+          "position": "absolute",
+          "transform": [
+            {
+              "scale": 0,
+            },
+          ],
+          "width": 14,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 14,
+        "justifyContent": "center",
+        "margin": 4,
+        "width": 14,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 14,
+          "opacity": 1,
+          "position": "absolute",
+          "transform": [
+            {
+              "scale": 0,
+            },
+          ],
+          "width": 14,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 14,
+        "justifyContent": "center",
+        "margin": 4,
+        "width": 14,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 14,
+          "opacity": 1,
+          "position": "absolute",
+          "transform": [
+            {
+              "scale": 0,
+            },
+          ],
+          "width": 14,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`loading indicator test should render a typing loading indicator with a red color and a delay of 200 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "red",
+          "borderRadius": 9999,
+          "height": 10,
+          "position": "absolute",
+          "top": 0,
+          "width": 10,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "red",
+          "borderRadius": 9999,
+          "height": 10,
+          "position": "absolute",
+          "top": 0,
+          "width": 10,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "red",
+          "borderRadius": 9999,
+          "height": 10,
+          "position": "absolute",
+          "top": 0,
+          "width": 10,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`loading indicator test should render an elastic loading indicator with 2 dots 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 10,
+          "position": "absolute",
+          "transform": [
+            {
+              "scaleY": 1,
+            },
+          ],
+          "width": 10,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 10,
+          "position": "absolute",
+          "transform": [
+            {
+              "scaleY": 1,
+            },
+          ],
+          "width": 10,
+        }
+      }
+    />
+  </View>
+</View>
+`;

package/src/components/organisms/loading-indicator/animation-style.animate.d.ts

@@ -0,0 +1,3 @@
+import { Animated } from 'react-native';
+export declare const animationStyle: (animation: string | undefined, node: Animated.Value, delay: number, size: number | undefined) => any;
+export declare const styles: (animation: string | undefined, color: string | undefined, size: number | undefined, dynamicSize: Animated.Value | undefined) => any;

package/src/components/organisms/loading-indicator/animation-style.animate.ts

@@ -0,0 +1,164 @@
+import {Animated} from 'react-native';
+
+export const animationStyle = (
+  animation: string | undefined,
+  node: Animated.Value,
+  delay: number,
+  size: number | undefined
+): any => {
+  const pulse = Animated.sequence([
+    Animated.timing(node, {
+      toValue: Number(size),
+      delay,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+    Animated.timing(node, {
+      toValue: 0,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+  ]);
+
+  const elastic = Animated.sequence([
+    Animated.timing(node, {
+      toValue: 1.5,
+      delay,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+    Animated.timing(node, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+  ]);
+
+  const flashing = Animated.sequence([
+    Animated.timing(node, {
+      toValue: 1,
+      delay,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+    Animated.timing(node, {
+      toValue: 0,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+    Animated.timing(node, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+  ]);
+
+  const typing = Animated.sequence([
+    Animated.timing(node, {
+      toValue: -Number(size),
+      delay,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+    Animated.timing(node, {
+      toValue: 0,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+  ]);
+
+  const ping = Animated.sequence([
+    Animated.timing(node, {
+      toValue: 0,
+      delay,
+      duration: 1200,
+      useNativeDriver: false,
+    }),
+  ]);
+
+  switch (animation) {
+    case 'pulse':
+      return pulse;
+    case 'elastic':
+      return elastic;
+    case 'flashing':
+      return flashing;
+    case 'typing':
+      return typing;
+    case 'ping':
+      return ping;
+    default:
+      return pulse;
+  }
+};
+
+export const styles = (
+  animation: string | undefined,
+  color: string | undefined,
+  size: number | undefined,
+  dynamicSize: Animated.Value | undefined
+): any => {
+  const pulse = {
+    position: 'absolute',
+    backgroundColor: color,
+    height: dynamicSize,
+    width: dynamicSize,
+    borderRadius: 9999,
+  };
+
+  const elastic = {
+    position: 'absolute',
+    backgroundColor: color,
+    height: size,
+    width: size,
+    transform: [{scaleY: dynamicSize}],
+    borderRadius: 9999,
+  };
+  const flashing = {
+    position: 'absolute',
+    backgroundColor: color,
+    height: size,
+    width: size,
+    opacity: dynamicSize,
+    borderRadius: 9999,
+  };
+  const typing = {
+    position: 'absolute',
+    top: dynamicSize,
+    backgroundColor: color,
+    height: size,
+    width: size,
+    borderRadius: 9999,
+  };
+  const ping = {
+    position: 'absolute',
+    opacity: dynamicSize,
+    transform: [
+      {
+        scale: dynamicSize?.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1, 0],
+        }),
+      },
+    ],
+    backgroundColor: color,
+    height: size,
+    width: size,
+    borderRadius: 9999,
+  };
+
+  switch (animation) {
+    case 'pulse':
+      return pulse;
+    case 'elastic':
+      return elastic;
+    case 'flashing':
+      return flashing;
+    case 'typing':
+      return typing;
+    case 'ping':
+      return ping;
+    default:
+      return pulse;
+  }
+};

package/src/components/organisms/loading-indicator/container.component.d.ts

@@ -0,0 +1 @@
+export declare const LoadingDotsContainer: () => JSX.Element;

package/src/components/organisms/loading-indicator/container.component.tsx

@@ -0,0 +1,65 @@
+import React, {useState} from 'react';
+import {Animated} from 'react-native';
+import {useLoadingContext} from '../../../context/loading-dots.context';
+import {Dot} from './dot.component';
+import {animationStyle} from './animation-style.animate';
+
+export const LoadingDotsContainer = (): JSX.Element => {
+  const {animation, dots, size, delay} = useLoadingContext();
+
+  const animatedValues = (animation: string | undefined) => {
+    switch (animation) {
+      case 'pulse':
+        return Number(0);
+      case 'elastic':
+        return Number(1);
+      case 'flashing':
+        return Number(size);
+      case 'typing':
+        return Number(0);
+      case 'ping':
+        return Number(1);
+      default:
+        return Number(0);
+    }
+  };
+
+  const list = Array.from(
+    Array(dots),
+    () => new Animated.Value(animatedValues(animation))
+  );
+
+  const [visible, setVisible] = useState(false);
+
+  const run = (nodes: Animated.Value[]) => {
+    Animated.parallel(
+      nodes.map((node, index) =>
+        animationStyle(
+          animation,
+          node,
+          delay ? index * delay : index * 260,
+          size
+        )
+      )
+    ).start(() => {
+      setVisible(!visible);
+    });
+  };
+
+  run(list);
+
+  return (
+    <Animated.View
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      {list.map((size, index) => (
+        <Dot key={index} dynamicSize={size} />
+      ))}
+    </Animated.View>
+  );
+};

package/src/components/organisms/loading-indicator/dot.component.d.ts

@@ -0,0 +1,6 @@
+import { Animated } from 'react-native';
+declare type DotProps = {
+    dynamicSize: Animated.Value;
+};
+export declare const Dot: ({ dynamicSize }: DotProps) => JSX.Element;
+export {};

package/src/components/organisms/loading-indicator/dot.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Animated, View} from 'react-native';
+import {useLoadingContext} from '../../../context/loading-dots.context';
+import {styles} from './animation-style.animate';
+
+type DotProps = {
+  dynamicSize: Animated.Value;
+};
+
+export const Dot = ({dynamicSize}: DotProps): JSX.Element => {
+  const {animation, color, size, spacing} = useLoadingContext();
+  return (
+    <View
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: size,
+        width: size,
+        margin: spacing,
+      }}
+    >
+      <Animated.View style={styles(animation, color, size, dynamicSize)} />
+    </View>
+  );
+};

package/src/components/organisms/loading-indicator/loading-indicator.component.d.ts

@@ -0,0 +1,2 @@
+import { LoadingDotsProps } from '../../../types/loading-dots.type';
+export declare const LoadingIndicator: ({ animation, dots, color, size, spacing, delay, }: LoadingDotsProps) => JSX.Element;

package/src/components/organisms/loading-indicator/loading-indicator.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {LoadingDotsProps} from '../../../types/loading-dots.type';
+import {LoadingDotsContainer} from './container.component';
+import {LoadingDotContextProvider} from '../../../context/loading-dots.context';
+
+export const LoadingIndicator = ({
+  animation = 'pulse',
+  dots = 3,
+  color = 'black',
+  size = 10,
+  spacing = 2,
+  delay = 260,
+}: LoadingDotsProps): JSX.Element => {
+  return (
+    <LoadingDotContextProvider
+      values={{animation, dots, color, size, spacing, delay}}
+    >
+      <LoadingDotsContainer />
+    </LoadingDotContextProvider>
+  );
+};

package/src/components/organisms/loading-indicator/loading-indicator.preview.d.ts

@@ -0,0 +1 @@
+export declare const LoadingIndicatorPreview: ({}: {}) => JSX.Element;

package/src/components/organisms/loading-indicator/loading-indicator.preview.tsx

@@ -0,0 +1,100 @@
+import React, {useContext} from 'react';
+import {View, Text} from 'react-native';
+import {LoadingIndicator} from './loading-indicator.component';
+import {ThemeCtx} from '../../../context/theme.context';
+
+export const LoadingIndicatorPreview = ({}: {}) => {
+  const context = useContext(ThemeCtx);
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        padding: 16,
+        backgroundColor: context.colors.ui.white,
+      }}
+    >
+      <View style={{flex: 1, justifyContent: 'space-around'}}>
+        <Text style={{fontWeight: 'bold', textAlign: 'center'}}>
+          Default/Pulse
+        </Text>
+        <LoadingIndicator color={context.colors.main['5']} dots={2} />
+        <LoadingIndicator color={context.colors.main['6']} dots={3} />
+        <LoadingIndicator color={context.colors.main['3']} dots={4} />
+      </View>
+      <View style={{flex: 1, justifyContent: 'space-around'}}>
+        <Text style={{fontWeight: 'bold', textAlign: 'center'}}>Elastic</Text>
+        <LoadingIndicator
+          animation={'elastic'}
+          color={context.colors.main['5']}
+          dots={2}
+        />
+        <LoadingIndicator
+          animation={'elastic'}
+          color={context.colors.main['6']}
+          dots={3}
+        />
+        <LoadingIndicator
+          animation={'elastic'}
+          color={context.colors.main['3']}
+          dots={4}
+        />
+      </View>
+      <View style={{flex: 1, justifyContent: 'space-around'}}>
+        <Text style={{fontWeight: 'bold', textAlign: 'center'}}>Flashing</Text>
+        <LoadingIndicator
+          animation={'flashing'}
+          color={context.colors.main['5']}
+          dots={2}
+        />
+        <LoadingIndicator
+          animation={'flashing'}
+          color={context.colors.main['6']}
+          dots={3}
+        />
+        <LoadingIndicator
+          animation={'flashing'}
+          color={context.colors.main['3']}
+          dots={4}
+        />
+      </View>
+      <View style={{flex: 1, justifyContent: 'space-around'}}>
+        <Text style={{fontWeight: 'bold', textAlign: 'center'}}>Typing</Text>
+        <LoadingIndicator
+          color={context.colors.main['5']}
+          animation={'typing'}
+          dots={2}
+        />
+        <LoadingIndicator
+          color={context.colors.main['6']}
+          animation={'typing'}
+          dots={3}
+        />
+        <LoadingIndicator
+          color={context.colors.main['3']}
+          animation={'typing'}
+          dots={4}
+        />
+      </View>
+      <View style={{flex: 1, justifyContent: 'space-around'}}>
+        <Text style={{fontWeight: 'bold', textAlign: 'center'}}>Ping</Text>
+        <LoadingIndicator
+          color={context.colors.main['5']}
+          animation={'ping'}
+          dots={2}
+        />
+        <LoadingIndicator
+          color={context.colors.main['6']}
+          animation={'ping'}
+          dots={3}
+        />
+        <LoadingIndicator
+          color={context.colors.main['3']}
+          animation={'ping'}
+          dots={4}
+        />
+      </View>
+    </View>
+  );
+};

package/src/components/organisms/loading-indicator/loading-indicator.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {LoadingIndicator} from './loading-indicator.component';
+
+describe('loading indicator test', function () {
+  it('should render a default loading indicator', function () {
+    const tree = renderer.create(<LoadingIndicator />).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render an elastic loading indicator with 2 dots', function () {
+    const tree = renderer
+      .create(<LoadingIndicator animation={'elastic'} dots={2} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a flashing loading indicator with a dot size of 12px', function () {
+    const tree = renderer
+      .create(<LoadingIndicator animation={'flashing'} size={12} />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a typing loading indicator with a red color and a delay of 200', function () {
+    const tree = renderer
+      .create(
+        <LoadingIndicator animation={'typing'} color={'red'} delay={200} />
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+  it('should render a ping loading indicator with a size of 14px and a spacing of 4px', function () {
+    const tree = renderer
+      .create(<LoadingIndicator animation={'ping'} size={14} spacing={4} />)
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/context/loading-dots.context.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { LoadingDotsProps } from '../types/loading-dots.type';
+declare const useLoadingContext: () => LoadingDotsProps;
+declare const LoadingDotContextProvider: ({ children, values, }: {
+    children: ReactNode;
+    values: LoadingDotsProps;
+}) => JSX.Element;
+export { LoadingDotContextProvider, useLoadingContext };

package/src/context/loading-dots.context.tsx

@@ -0,0 +1,33 @@
+import React, {createContext, ReactNode, useContext, useState} from 'react';
+import {LoadingDotsProps} from '../types/loading-dots.type';
+
+const defaultState = {
+  animation: 'pulse',
+  dots: 3,
+  color: 'black',
+  size: 10,
+  spacing: 2,
+};
+
+const LoadingDotContext = createContext<LoadingDotsProps>(defaultState);
+
+const useLoadingContext = () => {
+  const context = useContext(LoadingDotContext);
+  return context;
+};
+
+const LoadingDotContextProvider = ({
+  children,
+  values,
+}: {
+  children: ReactNode;
+  values: LoadingDotsProps;
+}) => {
+  return (
+    <LoadingDotContext.Provider value={{...values}}>
+      {children}
+    </LoadingDotContext.Provider>
+  );
+};
+
+export {LoadingDotContextProvider, useLoadingContext};

package/src/types/loading-dots.type.d.ts

@@ -0,0 +1,8 @@
+export declare type LoadingDotsProps = {
+    animation?: string;
+    dots?: number;
+    color?: string;
+    size?: number;
+    spacing?: number;
+    delay?: number;
+};

package/src/types/loading-dots.type.ts

@@ -0,0 +1,8 @@
+export type LoadingDotsProps = {
+  animation?: string;
+  dots?: number;
+  color?: string;
+  size?: number;
+  spacing?: number;
+  delay?: number;
+};