Facing difficulties with: Gantt. Suggestions welcome.

[alex.morris22]

Can Smart Gantt be lazy-loaded in React?

[Markov]

Hi,

Yes, Smart Gantt from Smart UI can be lazy-loaded in React using standard React features like React.lazy() and Suspense.

import React, { Suspense } from 'react';

const GanttChart = React.lazy(() => import('./SmartGanttComponent'));

function App() {
  return (
    <div>
      <h2>Project Timeline</h2>
      <Suspense fallback={<div>Loading Gantt chart...</div>}>
        <GanttChart />
      </Suspense>
    </div>
  );
}

export default App;

and SmartGanttComponent is

import React from 'react';
import 'smart-webcomponents-react/source/styles/smart.default.css';
import { GanttChart } from 'smart-webcomponents-react/ganttchart';

const SmartGanttComponent = () => {
  return (
    <GanttChart
      treeSize="30%"
      durationUnit="hour"
      dataSource={[]}
      taskColumns={[
        { label: 'Task Name', value: 'label' },
        { label: 'Start', value: 'dateStart' },
        { label: 'End', value: 'dateEnd' }
      ]}
    />
  );
};

export default SmartGanttComponent;

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts