motion

    let programList = _.without(
      _.flatten(
        normalSchools.result.map(id =>
            normalSchools.entities.school[id].programs.result.map(programId => {
              if (normalSchools.entities.school[id].programs.entities.program[programId].savedApplication) {
                console.log(application);
                return (
                  {
                    id: id,
                    programId: programId,
                    rank: application[programId].rank,
                  }

                );
              }
              return undefined;
            }),
          ),
        ),
        undefined
    );
    if (programList.length < 11) {
      programList.push({
          id: "emptyApplicaiton",
          rank: programList.length + 1,
          programId: "emptyApplication",
        })
    }
    if (programList.length === 1) {
      programList = [];
      programList = (
        <li key="emptyApplicationList" className={style.emptyApplicationList}>
          <p>CMSABLE NOTE FOR EMPTY PROGRAM LIST</p>
        </li>
      );
    }
    else if(programList.length !== 0) {
      programList = <TransitionMotion
        willLeave={this.willLeave}
        willEnter={this.willEnter}
        styles={programList.map(item => ({
          key: `${item.id}-${item.programId}`,
          style,
          data: {
            rank: item.rank,
            id: item.id,
            programId: item.programId,
          }
        }))}>
        {interpolatedStyles =>
          // first render: a, b, c. Second: still a, b, c! Only last one's a, b.
          <ol className={style.applicationList}>
            {interpolatedStyles.map(config => {
              const { rank, id, programId } = config.data;
              let slot = null;
              if (id === 'emptyApplicaiton') {
                slot = <li
                rank={rank}
                key={`${id}-${programId}`}
                className={style.emptyApplicationList}
                style={{...config.style}}
                ></li>
              }
              else {
              slot =  <li
                rank={rank}
                key={`${id}-${programId}`}
                className={style.applicationListItem}
                style={{...config.style }}
              >
                {/* * Keydown is a placeholder for functional keydown * */}
                <div>
                  <ApplicationSchoolWrapper
                    onClick={currentSchool}
                    rank={rank}
                    {...normalSchools.entities.school[id]}
                    {...headerProps}
                    singleProgramId={programId}
                    updateApplicationRank={updateApplicationRank}
                    removeProgram={this.saveApplicationFunc}
                  />
                </div>
              </li>
              }
              return slot
            })}
          </ol>
        }
      </TransitionMotion>
    }
    return (
      <div>
        {programList}
        {load}
      </div>
    );
  };