diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html
index 8de92a89b..7fca7f10e 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -11,74 +11,79 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-list id="core-course-section-selector" role="listbox" aria-labelledby="core-course-section-selector-label">
-        <ng-container *ngFor="let section of sectionsToRender">
-            <ion-item *ngIf="allSectionId == section.id" class="divider core-course-index-all"
-                (click)="selectSectionOrModule($event, section.id)" button [class.item-current]="selectedId === section.id" detail="false">
-                <ion-label>
-                    <h2>
-                        <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id">
-                        </core-format-text>
-                    </h2>
-                </ion-label>
-            </ion-item>
-            <ng-container *ngIf="allSectionId != section.id">
-                <ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button
-                    [class.item-current]="selectedId === section.id" [class.item-dimmed]="!section.visible"
-                    [class.item-hightlighted]="section.highlighted" detail="false" sticky="true">
-                    <ion-icon *ngIf="section.hasVisibleModules" name="fas-chevron-right" flip-rtl slot="start"
-                        class="expandable-status-icon" (click)="toggleExpand($event, section)"
-                        [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
-                        [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-index-section-' + section.id"
-                        [class.expandable-status-icon-expanded]="section.expanded">
-                    </ion-icon>
-                    <ion-icon *ngIf="!section.hasVisibleModules" name="" slot="start" aria-hidden="true" class="expandable-status-icon">
-                    </ion-icon>
+    <core-loading [hideUntil]="loaded">
+        <ion-list *ngIf="loaded" id="core-course-section-selector" role="listbox" aria-labelledby="core-course-section-selector-label">
+            <ng-container *ngFor="let section of sectionsToRender">
+                <ion-item *ngIf="allSectionId == section.id" class="divider core-course-index-all"
+                    (click)="selectSectionOrModule($event, section.id)" button [class.item-current]="selectedId === section.id"
+                    detail="false">
                     <ion-label>
                         <h2>
                             <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id">
                             </core-format-text>
                         </h2>
                     </ion-label>
-                    <ion-badge *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
-                    <ion-icon name="fas-lock" *ngIf="section.availabilityinfo" slot="end" class="restricted"
-                        [attr.aria-label]="'core.restricted' | translate"></ion-icon>
-                    <ion-icon name="fas-eye-slash" *ngIf="!section.visible && !section.uservisible" slot="end" class="restricted"
-                        [attr.aria-label]="'core.notavailable' | translate"></ion-icon>
-                    <ion-icon name="fas-eye-slash" *ngIf="!section.visible && section.uservisible" slot="end" class="restricted"
-                        [attr.aria-label]="'core.course.hiddenfromstudents' | translate"></ion-icon>
                 </ion-item>
-                <div id="core-course-index-section-{{section.id}}">
-                    <ng-container *ngIf="section.expanded">
-                        <ng-container *ngFor="let module of section.modules">
-                            <ion-item class="module" [class.item-dimmed]="!module.visible" [class.item-hightlighted]="section.highlighted"
-                                (click)="selectSectionOrModule($event, section.id, module.id)" button>
-                                <ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined"
-                                    slot="start" aria-hidden="true"></ion-icon>
-                                <ion-icon class="completioninfo completion_incomplete" name="far-circle"
-                                    *ngIf="module.completionStatus === 0" slot="start" [attr.aria-label]="'core.course.todo' | translate">
-                                </ion-icon>
-                                <ion-icon class="completioninfo completion_complete" name="fas-circle"
-                                    *ngIf="module.completionStatus === 1 || module.completionStatus === 2" color="success" slot="start"
-                                    [attr.aria-label]="'core.course.done' | translate">
-                                </ion-icon>
-                                <ion-icon class="completioninfo completion_fail" name="fas-circle" *ngIf="module.completionStatus === 3"
-                                    color="danger" slot="start" [attr.aria-label]="'core.course.failed' | translate">
-                                </ion-icon>
-                                <ion-label>
-                                    <p class="item-heading">
-                                        <core-format-text [text]="module.name" contextLevel="module" [contextInstanceId]="module.id"
-                                            [courseId]="module.course">
-                                        </core-format-text>
-                                    </p>
-                                </ion-label>
-                                <ion-icon name="fas-lock" *ngIf="!module.uservisible" slot="end" class="restricted"
-                                    [attr.aria-label]="'core.restricted' | translate"></ion-icon>
-                            </ion-item>
+                <ng-container *ngIf="allSectionId != section.id">
+                    <ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button
+                        [class.item-current]="selectedId === section.id" [class.item-dimmed]="!section.visible"
+                        [class.item-hightlighted]="section.highlighted" detail="false" sticky="true">
+                        <ion-icon *ngIf="section.hasVisibleModules" name="fas-chevron-right" flip-rtl slot="start"
+                            class="expandable-status-icon" (click)="toggleExpand($event, section)"
+                            [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
+                            [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-index-section-' + section.id"
+                            [class.expandable-status-icon-expanded]="section.expanded">
+                        </ion-icon>
+                        <ion-icon *ngIf="!section.hasVisibleModules" name="" slot="start" aria-hidden="true" class="expandable-status-icon">
+                        </ion-icon>
+                        <ion-label>
+                            <h2>
+                                <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id">
+                                </core-format-text>
+                            </h2>
+                        </ion-label>
+                        <ion-badge *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
+                        <ion-icon name="fas-lock" *ngIf="section.availabilityinfo" slot="end" class="restricted"
+                            [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                        <ion-icon name="fas-eye-slash" *ngIf="!section.visible && !section.uservisible" slot="end" class="restricted"
+                            [attr.aria-label]="'core.notavailable' | translate"></ion-icon>
+                        <ion-icon name="fas-eye-slash" *ngIf="!section.visible && section.uservisible" slot="end" class="restricted"
+                            [attr.aria-label]="'core.course.hiddenfromstudents' | translate"></ion-icon>
+                    </ion-item>
+                    <div id="core-course-index-section-{{section.id}}">
+                        <ng-container *ngIf="section.expanded">
+                            <ng-container *ngFor="let module of section.modules">
+                                <ion-item class="module" [class.item-dimmed]="!module.visible"
+                                    [class.item-hightlighted]="section.highlighted"
+                                    (click)="selectSectionOrModule($event, section.id, module.id)" button>
+                                    <ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined"
+                                        slot="start" aria-hidden="true"></ion-icon>
+                                    <ion-icon class="completioninfo completion_incomplete" name="far-circle"
+                                        *ngIf="module.completionStatus === 0" slot="start"
+                                        [attr.aria-label]="'core.course.todo' | translate">
+                                    </ion-icon>
+                                    <ion-icon class="completioninfo completion_complete" name="fas-circle"
+                                        *ngIf="module.completionStatus === 1 || module.completionStatus === 2" color="success" slot="start"
+                                        [attr.aria-label]="'core.course.done' | translate">
+                                    </ion-icon>
+                                    <ion-icon class="completioninfo completion_fail" name="fas-circle" *ngIf="module.completionStatus === 3"
+                                        color="danger" slot="start" [attr.aria-label]="'core.course.failed' | translate">
+                                    </ion-icon>
+                                    <ion-label>
+                                        <p class="item-heading">
+                                            <core-format-text [text]="module.name" contextLevel="module" [contextInstanceId]="module.id"
+                                                [courseId]="module.course">
+                                            </core-format-text>
+                                        </p>
+                                    </ion-label>
+                                    <ion-icon name="fas-lock" *ngIf="!module.uservisible" slot="end" class="restricted"
+                                        [attr.aria-label]="'core.restricted' | translate"></ion-icon>
+                                </ion-item>
+                            </ng-container>
                         </ng-container>
-                    </ng-container>
-                </div>
+                    </div>
+                </ng-container>
             </ng-container>
-        </ng-container>
-    </ion-list>
+        </ion-list>
+    </core-loading>
 </ion-content>
diff --git a/src/core/features/course/components/course-index/course-index.ts b/src/core/features/course/components/course-index/course-index.ts
index f2a66fdde..3e9ee1499 100644
--- a/src/core/features/course/components/course-index/course-index.ts
+++ b/src/core/features/course/components/course-index/course-index.ts
@@ -21,6 +21,7 @@ import {
 import { CoreCourseHelper, CoreCourseSection } from '@features/course/services/course-helper';
 import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate';
 import { CoreCourseAnyCourseData } from '@features/courses/services/courses';
+import { CoreUtils } from '@services/utils/utils';
 import { ModalController } from '@singletons';
 import { CoreDom } from '@singletons/dom';
 
@@ -41,6 +42,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
     allSectionId = CoreCourseProvider.ALL_SECTIONS_ID;
     highlighted?: string;
     sectionsToRender: CourseIndexSection[] = [];
+    loaded = false;
 
     constructor(
         protected elementRef: ElementRef,
@@ -109,6 +111,13 @@ export class CoreCourseCourseIndexComponent implements OnInit {
 
         this.highlighted = CoreCourseFormatDelegate.getSectionHightlightedName(this.course);
 
+        // Wait a bit to render the data, otherwise the modal takes a while to appear in big courses or slow devices.
+        await CoreUtils.wait(400);
+
+        this.loaded = true;
+
+        await CoreUtils.nextTick();
+
         CoreDom.scrollToElement(
             this.elementRef.nativeElement,
             '.item.item-current',