feat(my-joy-beta): show filter when loading machines

packages/my-joy-beta/src/components/instances/item.js

@@ -30,7 +30,7 @@ const stateColor = {
   unknown: 'secondaryActive'
 };
 
-export default ({ name, state, last, first }) => (
+export default ({ name, state, primaryIp, last, first }) => (
   <Card collapsed flat={!last} topMargin={first} bottomless={!last} gapless>
     <CardView>
       <CardMeta>
@@ -40,6 +40,11 @@ export default ({ name, state, last, first }) => (
           </FormGroup>
         </CardAction>
         <CardTitle to={`/instances/${name}`}>{name}</CardTitle>
+        <Small>
+          <CardLabel>
+            {primaryIp}
+          </CardLabel>
+        </Small>
         <Small>
           <CardLabel color={stateColor[state]} title={`The instance is ${state}`}>
             {titleCase(state)}

packages/my-joy-beta/src/components/instances/list.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import forceArray from 'force-array';
 
-import { FormGroup, Input, FormLabel } from 'joyent-ui-toolkit';
+import { FormGroup, Input, FormLabel, ViewContainer, StatusLoader } from 'joyent-ui-toolkit';
 import Item from './item';
 
-export default ({ instances, handleChange = () => null, handleSubmit }) => {
+export default ({ instances, loading, handleChange = () => null, handleSubmit }) => {
   const _instances = forceArray(instances);
 
   const items = _instances.map((instance, i, all) => (
@@ -16,12 +16,19 @@ export default ({ instances, handleChange = () => null, handleSubmit }) => {
     />
   ));
 
+  const _loading = (!items.length && loading) ? (
+    <ViewContainer center>
+      <StatusLoader />
+    </ViewContainer>
+  ) : null;
+
   return (
     <form onSubmit={() => handleSubmit(ctx => handleChange(ctx))}>
       <FormGroup name="filter" reduxForm>
         <FormLabel>Filter instances</FormLabel>
         <Input />
       </FormGroup>
+      {_loading}
       {items}
     </form>
   );

packages/my-joy-beta/src/containers/instances/list.js

@@ -17,11 +17,10 @@ const InstanceListForm = reduxForm({
   form: `instance-list`
 })(InstanceList);
 
-const List = ({ instances, loading, error }) => {
+const List = ({ instances = [], loading = false, error }) => {
   const _title = <Title>Instances</Title>;
   const _instances = forceArray(instances);
-  const _loading = !(loading && !_instances.length) ? null : <StatusLoader />;
+  const _loading = (!instances.length && loading);
-  const _list = _loading ? null : <InstanceListForm instances={_instances} />;
 
   const _error = !error ? null : (
     <Message
@@ -32,11 +31,10 @@ const List = ({ instances, loading, error }) => {
   );
 
   return (
-    <ViewContainer center={Boolean(_loading)} main>
+    <ViewContainer main>
       {_title}
       {!_loading && _error}
-      {_loading}
+      <InstanceListForm instances={_instances} loading={loading} />
-      {_list}
     </ViewContainer>
   );
 };

packages/my-joy-beta/src/graphql/list-instances.gql

@@ -8,6 +8,7 @@ query Instances {
     metadata
     tags
     firewallEnabled
+    primaryIp
     docker
   }
 }