revert MultiCredentialLookup loading jank fix

awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx

@@ -37,14 +37,14 @@ function MultiCredentialsLookup(props) {
   const [selectedType, setSelectedType] = useState(null);
   const [credentials, setCredentials] = useState([]);
   const [credentialsCount, setCredentialsCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     (async () => {
       try {
         const types = await loadCredentialTypes();
         setCredentialTypes(types);
-        setSelectedType(types.find(type => type.kind === 'ssh') || types[0]);
+        const match = types.find(type => type.kind === 'ssh') || types[0];
+        setSelectedType(match);
       } catch (err) {
         onError(err);
       }
@@ -57,7 +57,6 @@ function MultiCredentialsLookup(props) {
         return;
       }
       try {
-        setIsLoading(true);
         const params = parseQueryString(QS_CONFIG, history.location.search);
         const { results, count } = await loadCredentials(
           params,
@@ -65,14 +64,12 @@ function MultiCredentialsLookup(props) {
         );
         setCredentials(results);
         setCredentialsCount(count);
-        setIsLoading(false);
       } catch (err) {
         onError(err);
       }
     })();
   }, [selectedType, history.location.search, onError]);
 
-  const isMultiple = selectedType && selectedType.kind === 'vault';
   const renderChip = ({ item, removeItem, canDelete }) => (
     <CredentialChip
       key={item.id}
@@ -82,6 +79,8 @@ function MultiCredentialsLookup(props) {
     />
   );
 
+  const isMultiple = selectedType && selectedType.kind === 'vault';
+
   return (
     <FormGroup label={i18n._(t`Credentials`)} fieldId="multiCredential">
       {tooltip && <FieldTooltip content={tooltip} />}
@@ -136,7 +135,6 @@ function MultiCredentialsLookup(props) {
                 name="credentials"
                 qsConfig={QS_CONFIG}
                 readOnly={!canDelete}
-                isLoading={isLoading}
                 selectItem={item => {
                   if (isMultiple) {
                     return dispatch({ type: 'SELECT_ITEM', item });

awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes, { arrayOf, shape, string, bool } from 'prop-types';
 import { DataList } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
@@ -25,34 +25,10 @@ import PaginatedDataListItem from './PaginatedDataListItem';
 class PaginatedDataList extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      height: 0,
-    };
-    this.ref = React.createRef();
     this.handleSetPage = this.handleSetPage.bind(this);
     this.handleSetPageSize = this.handleSetPageSize.bind(this);
   }
 
-  componentDidUpdate(prevProps) {
-    const { items } = this.props;
-    if (prevProps.items !== items) {
-      this.findHeight();
-    }
-  }
-
-  findHeight() {
-    if (!this.ref || !this.ref.current) {
-      return;
-    }
-    const { state } = this;
-    const height = this.ref.current.scrollHeight;
-    if (height && height !== state.height) {
-      this.setState({
-        height: this.ref.current.scrollHeight,
-      });
-    }
-  }
-
   handleSetPage(event, pageNumber) {
     const { history, qsConfig } = this.props;
     const { search } = history.location;
@@ -90,7 +66,6 @@ class PaginatedDataList extends React.Component {
       i18n,
       renderToolbar,
     } = this.props;
-    const { height } = this.state;
     const columns = toolbarColumns.length
       ? toolbarColumns
       : [
@@ -110,14 +85,8 @@ class PaginatedDataList extends React.Component {
     const emptyContentTitle = i18n._(t`No ${pluralizedItemName} Found `);
 
     let Content;
-    if (hasContentLoading) {
+    if (hasContentLoading && items.length <= 0) {
-      Content = (
+      Content = <ContentLoading />;
-        <ContentLoading
-          css={`
-            min-height: ${height}px;
-          `}
-        />
-      );
     } else if (contentError) {
       Content = <ContentError error={contentError} />;
     } else if (items.length <= 0) {
@@ -131,7 +100,7 @@ class PaginatedDataList extends React.Component {
     }
 
     return (
-      <div ref={this.ref}>
+      <Fragment>
         <ListHeader
           itemCount={itemCount}
           renderToolbar={renderToolbar}
@@ -160,7 +129,7 @@ class PaginatedDataList extends React.Component {
             onPerPageSelect={this.handleSetPageSize}
           />
         ) : null}
-      </div>
+      </Fragment>
     );
   }
 }