diff --git a/public/react/src/modules/courses/members/CourseGroupList.js b/public/react/src/modules/courses/members/CourseGroupList.js
index 2a17f02c8..07a24f318 100644
--- a/public/react/src/modules/courses/members/CourseGroupList.js
+++ b/public/react/src/modules/courses/members/CourseGroupList.js
@@ -14,9 +14,9 @@ import CourseLayoutcomponent from '../common/CourseLayoutComponent'
 import Titlesearchsection from '../common/titleSearch/TitleSearchSection'
 import ColorCountText from '../common/titleSearch/ColorCountText'
 
-import { WordsBtn, trigger, on, off, getUrl, downloadFile , sortDirections } from 'educoder'
+import { WordsBtn, trigger, on, off, getUrl, downloadFile , sortDirections, NoneData } from 'educoder'
 import Modals from "../../modals/Modals";
-import NoneData from "../coursesPublic/NoneData"
+
 import DownloadMessageysl from "../../modals/DownloadMessageysl";
 import CreateGroupByImportModal from './modal/CreateGroupByImportModal'
 import ChangeRolePop from './ChangeRolePop'
@@ -28,6 +28,7 @@ import './studentsList.css'
 */
 function CourseGroupList(props) {
     const [searchValue, setSearchValue] = useState('')
+    const [isSpin, setIsSpin] = useState(true)
 
     const [DownloadType, setDownloadType] = useState()
     const [DownloadMessageval, setDownloadMessageval] = useState()
@@ -50,10 +51,12 @@ function CourseGroupList(props) {
     }
     async function fetchAll() {
         const url = `/courses/${courseId}/course_groups.json`
+        setIsSpin(true)
         const response = await axios.get(url, { params: {
             search: searchValue
         }});
         console.log(response)
+        setIsSpin(false)
         if (response) {
             setListRes(response.data)
         }
@@ -205,12 +208,15 @@ function CourseGroupList(props) {
             ></Titlesearchsection>
             
             <div className="mt20 edu-back-white padding20 courseGroupList">
-                <CourseGroupListTable
-                    course_groups={course_groups}
-                    onOperationSuccess={onOperationSuccess}
-                    current_group_id={current_group_id}
-                    {...props}
-                ></CourseGroupListTable>
+                <Spin size="large" spinning={isSpin}>
+                    {course_groups && !!course_groups.length ? <CourseGroupListTable
+                        course_groups={course_groups}
+                        onOperationSuccess={onOperationSuccess}
+                        current_group_id={current_group_id}
+                        {...props}
+                    ></CourseGroupListTable> : 
+                    <NoneData></NoneData>}
+                </Spin>
             </div>
         </React.Fragment>
     )