InvestigationWidget.js

import React, { Suspense } from 'react';
import { Panel, Tab, Tabs } from 'react-bootstrap';
import { NetworkErrorBoundary } from 'rest-hooks';
import Loader from '../Loader';
import SamplesTable from './SamplesTable';
import ParticipantsPanel from './ParticipantsPanel';

function InvestigationWidget(props) {
  const { investigation } = props;

  return (
    <Panel>
      <Panel.Body>
        <Tabs id="tabs">
          <Tab style={{ margin: 30 }} eventKey={1} title="Participants">
            <ParticipantsPanel investigationId={investigation.id} />
          </Tab>
          <Tab style={{ margin: 30 }} eventKey={2} title="Samples">
            <Suspense fallback={<Loader message="Loading samples" />}>
              <NetworkErrorBoundary>
                <SamplesTable investigationId={investigation.id} />
              </NetworkErrorBoundary>
            </Suspense>
          </Tab>
        </Tabs>
      </Panel.Body>
      <Panel.Footer></Panel.Footer>
    </Panel>
  );
}

export default InvestigationWidget;