implementation of dynamic timeline in first page

src/components/first/LoanDescription/TimeLineDetails.jsx

@@ -4,6 +4,7 @@ import {useRequest} from "@witel/webapp-builder";
 import TimelineManager from "@/core/components/timelines/timelineManager";
 import moment from "jalali-moment";
 import {Timeline} from "@mui/lab";
+import {LinearProgress} from "@mui/material";
 
 const TimeLineDetails = () => {
     const t = useTranslations();
@@ -14,7 +15,6 @@ const TimeLineDetails = () => {
     useEffect(() => {
         setLoading(true)
         request(process.env.NEXT_PUBLIC_CONFIG_APP_URL, 'get').then(res => {
-            setLoading(false)
             let tempArr = []
             for (const timeLine of res.data.time_lines.navgan_first_page) {
                 let temp = {}
@@ -33,6 +33,7 @@ const TimeLineDetails = () => {
                 tempArr.push(temp)
             }
             setTimeLineList(tempArr)
+            setLoading(false)
         }).catch(() => {
             setLoading(false)
         })
@@ -41,7 +42,7 @@ const TimeLineDetails = () => {
     return (
         <>
             {loading ? (
-                <>loading...</>
+                <LinearProgress/>
             ) : (
                 <Timeline position="alternate">
                     {timeLineList.map((timeLine, index) => (