add

apps/web/src/components/models/course/detail/CourseDetailDisplayArea.tsx

@@ -27,7 +27,7 @@ export const CourseDetailDisplayArea: React.FC = () => {
 			{lectureIsLoading && (
 				<Skeleton active paragraph={{ rows: 4 }} title={false} />
 			)}
-			{!selectedLectureId && (
+			{!selectedLectureId && !lectureIsLoading && (
 				<>
 					<div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-4">
 						<div className="w-full  bg-white shadow-md rounded-lg  border border-gray-200  p-6  ">
@@ -36,20 +36,23 @@ export const CourseDetailDisplayArea: React.FC = () => {
 					</div>
 				</>
 			)}
-			{!lectureIsLoading && lecture?.meta?.type === LectureType.VIDEO && (
+			{selectedLectureId &&
-				<div className="flex justify-center flex-col items-center gap-2 w-full mt-2 px-4">
+				!lectureIsLoading &&
-					<motion.div
+				lecture?.meta?.type === LectureType.VIDEO && (
-						style={{
+					<div className="flex justify-center flex-col items-center gap-2 w-full mt-2 px-4">
-							opacity: videoOpacity,
+						<motion.div
-						}}
+							style={{
-						className="w-full bg-black rounded-lg  ">
+								opacity: videoOpacity,
-						<div className=" w-full  ">
+							}}
-							<VideoPlayer src={lecture?.meta?.videoUrl} />
+							className="w-full bg-black rounded-lg  ">
-						</div>
+							<div className=" w-full  ">
-					</motion.div>
+								<VideoPlayer src={lecture?.meta?.videoUrl} />
-				</div>
+							</div>
-			)}
+						</motion.div>
+					</div>
+				)}
 			{!lectureIsLoading &&
+				selectedLectureId &&
 				lecture?.meta?.type === LectureType.ARTICLE && (
 					<div className="flex justify-center flex-col items-center gap-2 w-full my-2 px-4">
 						<div className="w-full  bg-white shadow-md rounded-lg  border border-gray-200  p-6  ">