Like the course page, the assignment creation page takes forever to load, but it's not because of the same thing causing the course page to load slowly. The issue here is that the data query happens client-side in a useEffect, which takes longer than sequential server queries.
The fix is to split the page into a server component parent and a client component child:
page.tsx (server) ← fetches topics, passes as prop
└── CreateAssignmentForm.tsx (client) ← handles Autocomplete, form state, ProblemsManager
The whole page is currently "use client" because of the MUI Autocomplete and form state, but those only need to be client-side—the topics fetch doesn't. This is a meaningful improvement since the topics dropdown is the first interactive element a teacher uses on that page.
Like the course page, the assignment creation page takes forever to load, but it's not because of the same thing causing the course page to load slowly. The issue here is that the data query happens client-side in a
useEffect, which takes longer than sequential server queries.The fix is to split the page into a server component parent and a client component child:
page.tsx (server) ← fetches topics, passes as prop
└── CreateAssignmentForm.tsx (client) ← handles Autocomplete, form state, ProblemsManager
The whole page is currently "use client" because of the MUI Autocomplete and form state, but those only need to be client-side—the topics fetch doesn't. This is a meaningful improvement since the topics dropdown is the first interactive element a teacher uses on that page.