feat: conditionally render cta component

add todo comment

fix alignment

use round button variant

src/components/search/results/results-cta/results-cta.js

@@ -11,12 +11,13 @@ export const ResultsCTA = () => {
   return (
     <Card className="cta-card">
       <Row>
-        <Col className="text-container" xl={ 18 } lg={ 18 } md={ 20 } sm={ 24 } xs={ 24 }>
+        <Col className="text-container" xl={ 18 } lg={ 18 } md={ 18 } sm={ 24 } xs={ 24 }>
           <Typography>{ context['results-cta'].text }</Typography>
         </Col>
-        <Col className="button-container" xl={ 6 } lg={ 6 } md={ 4 } sm={ 24 } xs={ 24 }>
+        <Col className="button-container" xl={ 6 } lg={ 6 } md={ 6 } sm={ 24 } xs={ 24 }>
           <Button
             type="primary"
+            shape="round"
             icon={ <CtaIcon /> }
             href={ context['results-cta'].action.url }
           >{ context['results-cta'].action.label }</Button>

src/components/search/results/results.js

@@ -1,20 +1,19 @@
-import React, { Fragment, useMemo, useCallback, useState } from 'react'
-import { Spin, Grid as AntGrid, Typography, Radio, Tooltip } from 'antd'
-import {
-  DatabaseOutlined as ConceptViewIcon,
-  BarChartOutlined as VariableViewIcon
-} from '@ant-design/icons'
+import React, { Fragment } from 'react'
 import { ExpandedResultsLayout, ConceptsGridLayout, VariableViewLayout } from './'
 import { useHelxSearch, SearchLayout } from '../'
-import { SearchForm } from '../form'
+import { ResultsCTA } from './results-cta'
 
 import './results.css'
 
 export const Results = () => {
-  const { isLoadingVariableResults, isLoadingConcepts, error, layout } = useHelxSearch()
+  const { isLoadingConcepts, layout } = useHelxSearch()
 
   return (
     <Fragment>
+      {
+        // Todo: determine proper condition to render this CTA
+        !isLoadingConcepts && <ResultsCTA /> }
+
       { layout === SearchLayout.EXPANDED_RESULT ? (
         <ExpandedResultsLayout />
       ) : layout === SearchLayout.GRID ? (