foo.diff

diff --git a/src/ui/components/shared/Sharing.js b/src/ui/components/shared/Sharing.js
index d7ca3e17..b1e5ca00 100644
--- a/src/ui/components/shared/Sharing.js
+++ b/src/ui/components/shared/Sharing.js
@@ -152,13 +152,7 @@ function PermissionsList({ data, recordingId, refetch }) {
 }
 
 function MutationStatus({ owner, inputValue, recordingId, setInProgress, setInputValue, refetch }) {
-  const { data, loading, error } = useQuery(GET_COLLABORATOR_ID, {
-    variables: { email: inputValue },
-  });
-  const [
-    addNewCollaborator,
-    { called: mutationCalled, loading: mutationLoading, error: mutationError },
-  ] = useMutation(ADD_COLLABORATOR);
+  const [addNewCollaborator, addNewCollaboratorData] = useMutation(ADD_COLLABORATOR);
 
   useEffect(() => {
     // Upon succesfully adding a collaborator, this component dismounts itself.
@@ -203,28 +197,14 @@ function MutationStatus({ owner, inputValue, recordingId, setInProgress, setInpu
   );
 }
 
-function NewCollaboratorForm({ data, recordingId, refetch }) {
-  const [inputValue, setInputValue] = useState("");
-  const [inProgress, setInProgress] = useState(false);
+function AddEmail() {
+  const [fetchUser, fetchUserData] = useLazyQuery(GET_COLLABORATOR_ID);
 
   const handleSubmit = e => {
     e.preventDefault();
-    setInProgress(true);
+    fetchUser({ variables: { email: inputValue } });
+    setStatus({type: "fetching-user", response: fetchUserData})
   };
-
-  if (inProgress) {
-    return (
-      <MutationStatus
-        owner={data.recordings[0].user}
-        inputValue={inputValue}
-        recordingId={recordingId}
-        setInProgress={setInProgress}
-        setInputValue={setInputValue}
-        refetch={refetch}
-      />
-    );
-  }
-
   return (
     <form>
       <input
@@ -238,6 +218,43 @@ function NewCollaboratorForm({ data, recordingId, refetch }) {
   );
 }
 
+function NewCollaboratorForm({ data, recordingId, refetch }) {
+  const [status, setStatus] = useState({ type: "input" });
+  const [inProgress, setInProgress] = useState(false);
+
+  if (status.type == "input")
+      return <AddEmail setStatus={setStatus}></AddEmail>;
+  }
+
+  if (status.type =="fetching-user") {
+    if (status.response.error) { 
+    }
+    if (status.response.data) {
+    }
+  }
+
+  if (status == "submittingUser") {
+    return <FetchingUser></FetchingUser>;
+  }
+
+  if (status == "addingCollaborator") {
+    return <AddingCollaborator></AddingCollaborator>;
+  }
+
+  // if (inProgress) {
+  //   return (
+  //     <MutationStatus
+  //       owner={data.recordings[0].user}
+  //       inputValue={inputValue}
+  //       recordingId={recordingId}
+  //       setInProgress={setInProgress}
+  //       setInputValue={setInputValue}
+  //       refetch={refetch}
+  //     />
+  //   );
+  // }
+}
+
 function Sharing({ modal, hideModal }) {
   const { data, loading, error, refetch } = useQuery(GET_OWNER_AND_COLLABORATORS, {
     variables: { recordingId: modal.recordingId },