CoursesList: анимация загрузки

Author: DedSec256

hwproj.front/src/components/Courses/Courses.tsx

@@ -38,18 +38,6 @@ export default class Courses extends React.Component<Props, ICoursesState> {
         const {isLoaded, allCourses, myCourses, tabValue} = this.state;
         const {navigate} = this.props.navigate;
 
-        if (!isLoaded) {
-            return (
-                <div className="container">
-                    <DotLottieReact
-                        src="https://lottie.host/fae237c0-ae74-458a-96f8-788fa3dcd895/MY7FxHtnH9.lottie"
-                        loop
-                        autoplay
-                    />
-                </div>
-            );
-        }
-
         const activeCourses = myCourses.filter(course => !course.isCompleted)
         const completedCourses = myCourses.filter(course => course.isCompleted)
         const isExpert = this.props.isExpert
@@ -76,11 +64,14 @@ export default class Courses extends React.Component<Props, ICoursesState> {
                     {completedCourses.length > 0 && <Tab label="Завершенные курсы"/>}
                 </Tabs>
                 {tabValue === activeCoursesTab &&
-                    <CoursesList navigate={navigate} courses={activeCourses} isExpert={isExpert}/>}
+                    <CoursesList navigate={navigate} courses={isLoaded ? activeCourses : undefined}
+                                 isExpert={isExpert}/>}
                 {tabValue === allCoursesTab && !isExpert
-                    && <CoursesList navigate={navigate} courses={allCourses} isExpert={isExpert}/>}
+                    &&
+                    <CoursesList navigate={navigate} courses={isLoaded ? allCourses : undefined} isExpert={isExpert}/>}
                 {tabValue === completedCoursesTab &&
-                    <CoursesList navigate={navigate} courses={completedCourses} isExpert={isExpert}/>}
+                    <CoursesList navigate={navigate} courses={isLoaded ? completedCourses : undefined}
+                                 isExpert={isExpert}/>}
             </div>
         );
     }

hwproj.front/src/components/Courses/CoursesList.tsx

@@ -1,24 +1,36 @@
 import * as React from "react";
-import {CoursePreviewView} from "../../api/";
+import {CoursePreviewView} from "@/api";
 import {NavLink} from "react-router-dom";
 import MentorsList from "../Common/MentorsList";
-import {Box, Divider, Grid, ListItem, Typography} from "@mui/material";
+import {Box, Divider, Grid, ListItem, Skeleton, Typography} from "@mui/material";
 import NameBuilder from "../Utils/NameBuilder";
 
 interface ICoursesProps {
     navigate: any
-    courses: CoursePreviewView[];
+    courses: CoursePreviewView[] | undefined;
     isExpert: boolean
 }
 
 export class CoursesList extends React.Component<ICoursesProps, {}> {
     public render() {
         const {courses, isExpert} = this.props;
+        const ghostCoursesRand = [45, 12, 23, 3, 67, 50, 19]
 
         return (
             <Box>
                 <Grid container direction="column">
-                    {courses.map((course, i) => (
+                    {courses === undefined && ghostCoursesRand.map((rand, i) => {
+                        return <Grid item key={i}>
+                            <Skeleton variant="rectangular" animation="wave" width={300 + rand} height={25}
+                                      style={{marginBottom: 5}}/>
+                            <Skeleton variant="rectangular" animation="wave" width={50 + rand} height={14}
+                                      style={{marginBottom: 10}}/>
+                            <Skeleton variant="rectangular" animation="wave" width={150 + rand} height={20}/>
+                            {i < ghostCoursesRand.length - 1 ?
+                                <Divider style={{marginTop: 10, marginBottom: 10}}/> : null}
+                        </Grid>;
+                    })}
+                    {courses && courses.map((course, i) => (
                         <Grid item key={course.id}>
                             <ListItem
                                 style={{padding: 0, marginBottom: 5}}