update it

webui/src/components/Shared/Modal.js

@@ -75,18 +75,16 @@ class Modal extends Component {
     const {visible, children, width} = this.props;
 
     return (
-      <div>
-        <Wrapper width={width}>
-          <CSSTransitionGroup
-            transitionName="modal"
-            transitionEnterTimeout={500}
-            transitionLeaveTimeout={500}>
-            {
-              visible && (<div>{children}</div>)
-            }
-          </CSSTransitionGroup>
-        </Wrapper>
-      </div>
+      <Wrapper width={width}>
+        <CSSTransitionGroup
+          transitionName="modal"
+          transitionEnterTimeout={500}
+          transitionLeaveTimeout={500}>
+          {
+            visible && (<div>{children}</div>)
+          }
+        </CSSTransitionGroup>
+      </Wrapper>
     );
   }
 }

webui/src/components/Subscriber/List.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import oc from 'open-color';
 import { media, transitions } from 'helpers/style-utils';
+import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
 import { Layout } from 'components';
 import Item from './Item';
@@ -11,21 +12,40 @@ const Wrapper = styled.div`
   display: block;
   
   ${media.mobile`
-      margin-top: 0.25rem;
+    margin-top: 0.25rem;
   `}
+
+  .subscriber-enter {
+    animation: ${transitions.stretchOut} .3s ease-in;
+    animation-fill-mode: forwards;
+  }   
+    
+  .subscriber-leave { 
+    animation: ${transitions.shrinkIn} .15s ease-in;
+    animation-fill-mode: forwards;
+  }   
 `
 
 const propTypes = {
   subscribers: PropTypes.arrayOf(PropTypes.object)
 }
 
-const List = ({ subscribers }) => (
-  <Wrapper>
-    {subscribers.map(subscriber =>
-      <Item subscriber={subscriber} />
-    )}
-  </Wrapper>
-)
+const List = ({ subscribers }) => {
+  const subscriberList = subscribers.map(subscriber =>
+    <Item key={subscriber.imsi} subscriber={subscriber} />
+  );
+
+  return (
+    <Wrapper>
+      <CSSTransitionGroup
+        transitionName="subscriber"
+        transitionEnterTimeout={300}
+        transitionLeaveTimeout={150}>
+        {subscriberList}
+      </CSSTransitionGroup>
+    </Wrapper>
+  )
+}
 
 List.propTypes = propTypes;
 

webui/src/containers/SubscriberContainer.js

@@ -8,7 +8,7 @@ import { select } from 'modules/crud/selectors';
 import { Spinner, Subscriber } from 'components';
 
 class SubscriberContainer extends Component {
-   componentWillMount() {
+  componentWillMount() {
     const { subscribers, dispatch } = this.props
     if (subscribers.needsFetch) {
       dispatch(subscribers.fetch)
@@ -26,16 +26,12 @@ class SubscriberContainer extends Component {
   render() {
     const { subscribers } = this.props
 
-    if (subscribers.isLoading) {
-      return <Spinner/>
-    } else {
-      return (
-        <div>
-          <Subscriber.Search />
-          <Subscriber.List subscribers={subscribers.data} />
-        </div>
-      )
-    }
+    return (
+      <div>
+        <Subscriber.Search />
+        <Subscriber.List subscribers={subscribers.data} />
+      </div>
+    )
   }
 }