Merge pull request #469 from performant-software/RB-record-detail-loading

Adds loading prop to `RecordDetailPanel`

Author: ajolipa

packages/core-data/src/components/RecordDetailPanel.js

@@ -7,6 +7,7 @@ import AccordionItemsList from './AccordionItemsList';
 import RecordDetailHeader from './RecordDetailHeader';
 import type { RelatedRecordsList } from '../types/RelatedRecordsList';
 import RecordDetailBreadcrumbs from './RecordDetailBreadcrumbs';
+import LoadAnimation from './LoadAnimation';
 
 type Props = {
   /**
@@ -45,6 +46,11 @@ type Props = {
    */
   icon?: string,
 
+  /**
+   * If true, displays a loading icon in place of the related records list
+   */
+  loading?: Boolean,
+
   /**
    * A function called when the `close` icon is clicked
    */
@@ -113,11 +119,15 @@ const RecordDetailPanel = (props: Props) => (
         { props.children }
       </RecordDetailHeader>
     </div>
-    <AccordionItemsList
-      className={clsx(props.classNames?.relatedRecords)}
-      items={props.relations}
-      count={props.count}
-    />
+    { props.loading
+      ? <div className='py-4 px-8'><LoadAnimation /></div>
+      : (
+        <AccordionItemsList
+          className={clsx(props.classNames?.relatedRecords)}
+          items={props.relations}
+          count={props.count}
+        />
+      ) }
   </div>
 );
 

packages/storybook/src/core-data/RecordDetailPanel.stories.js

@@ -322,3 +322,40 @@ export const NoRelatedRecords = () => (
     </p>
   </RecordDetailPanel>
 );
+
+export const WithLoadingDelay = () => {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 3000);
+  }, []);
+
+  return (
+    <RecordDetailPanel
+      loading={loading}
+      relations={sampleData}
+      title='West Tokyo Qualifiers Quarterfinal'
+      detailItems={[
+        {
+          text: 'July 27',
+          icon: 'date'
+        },
+        {
+          text: 'Meiji Jinju Stadium',
+          icon: 'location'
+        }
+      ]}
+    >
+      <p>
+        Arcu imperdiet sit sit viverra id volutpat commodo.
+        {' '}
+        <span className='font-bold'>Tempor sem malesuada porttitor congue.</span>
+        {' '}
+        Nibh aenean vitae blandit vitae sapien ac varius mattis.
+        Aliquam vitae purus arcu eros enim tempus parturient orci fames.
+      </p>
+    </RecordDetailPanel>
+  );
+};