Handle missing data better

services/main-frontend/src/app/manage/course-instances/[id]/course-status-summary-for-user/[user_id]/page.tsx

@@ -5,6 +5,7 @@ import { useParams, useRouter } from "next/navigation"
 import React, { useEffect } from "react"
 
 import { fetchCourseInstance } from "@/services/backend/course-instances"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import Spinner from "@/shared-module/common/components/Spinner"
 import { withSignedIn } from "@/shared-module/common/contexts/LoginStateContext"
@@ -29,9 +30,18 @@ const CourseInstanceStatusSummaryRedirect: React.FC = () => {
   if (courseInstanceQuery.isError) {
     return <ErrorBanner variant="readOnly" error={courseInstanceQuery.error} />
   }
-  if (courseInstanceQuery.isLoading || !courseInstanceQuery.data) {
+  if (courseInstanceQuery.isLoading) {
     return <Spinner variant="medium" />
   }
+  if (!courseInstanceQuery.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void courseInstanceQuery.refetch()
+        }}
+      />
+    )
+  }
   return <Spinner variant="medium" />
 }
 

services/main-frontend/src/app/manage/courses/[id]/change-requests/EditProposalList.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next"
 import EditProposalPage from "./EditProposalPage"
 
 import { fetchEditProposalCount } from "@/services/backend/proposedEdits"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import Pagination from "@/shared-module/common/components/Pagination"
 import Spinner from "@/shared-module/common/components/Spinner"
@@ -34,10 +35,20 @@ const EditProposalList: React.FC<React.PropsWithChildren<Props>> = ({
     return <ErrorBanner variant={"readOnly"} error={getEditProposalCount.error} />
   }
 
-  if (getEditProposalCount.isLoading || !getEditProposalCount.data) {
+  if (getEditProposalCount.isLoading) {
     return <Spinner variant="medium" />
   }
 
+  if (!getEditProposalCount.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void getEditProposalCount.refetch()
+        }}
+      />
+    )
+  }
+
   const items = pending ? getEditProposalCount.data.pending : getEditProposalCount.data.handled
   if (items <= 0) {
     return <div>{t("no-change-requests")}</div>

services/main-frontend/src/app/manage/courses/[id]/change-requests/EditProposalPage.tsx

@@ -8,6 +8,7 @@ import EditProposalView from "./EditProposalView"
 
 import { fetchEditProposals, processProposal } from "@/services/backend/proposedEdits"
 import { BlockProposalInfo } from "@/shared-module/common/bindings"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import Spinner from "@/shared-module/common/components/Spinner"
 import { fontWeights, typography } from "@/shared-module/common/styles/typography"
@@ -56,10 +57,20 @@ const EditProposalPage: React.FC<React.PropsWithChildren<Props>> = ({
     return <ErrorBanner variant={"readOnly"} error={getEditProposalList.error} />
   }
 
-  if (getEditProposalList.isLoading || !getEditProposalList.data) {
+  if (getEditProposalList.isLoading) {
     return <Spinner variant={"medium"} />
   }
 
+  if (!getEditProposalList.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void getEditProposalList.refetch()
+        }}
+      />
+    )
+  }
+
   if (getEditProposalList.data.length === 0) {
     return <div>{t("nothing-here")}</div>
   }

services/main-frontend/src/app/manage/courses/[id]/exercises/ExerciseRepositories.tsx

@@ -12,6 +12,7 @@ import {
   getExerciseRepositories,
 } from "@/services/backend/exercise-repositories"
 import Button from "@/shared-module/common/components/Button"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import useToastMutation from "@/shared-module/common/hooks/useToastMutation"
 
@@ -55,10 +56,20 @@ const ExerciseRepositories: React.FC<Props> = ({ courseId, examId }) => {
     return <ErrorBanner error={exerciseRepositories.error} variant={"readOnly"} />
   }
 
-  if (exerciseRepositories.isLoading || !exerciseRepositories.data) {
+  if (exerciseRepositories.isLoading) {
     return <div>{t("loading-text")}</div>
   }
 
+  if (!exerciseRepositories.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void exerciseRepositories.refetch()
+        }}
+      />
+    )
+  }
+
   return (
     <>
       {addingRepo ? (

services/main-frontend/src/app/manage/courses/[id]/feedback/FeedbackList.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next"
 import FeedbackPage from "./FeedbackPage"
 
 import { fetchFeedbackCount } from "@/services/backend/feedback"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import Pagination from "@/shared-module/common/components/Pagination"
 import Spinner from "@/shared-module/common/components/Spinner"
@@ -29,10 +30,20 @@ const FeedbackList: React.FC<React.PropsWithChildren<Props>> = ({ courseId, read
     return <ErrorBanner variant={"readOnly"} error={getFeedbackCount.error} />
   }
 
-  if (getFeedbackCount.isLoading || !getFeedbackCount.data) {
+  if (getFeedbackCount.isLoading) {
     return <Spinner variant={"medium"} />
   }
 
+  if (!getFeedbackCount.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void getFeedbackCount.refetch()
+        }}
+      />
+    )
+  }
+
   const items = read ? getFeedbackCount.data.read : getFeedbackCount.data.unread
   if (items <= 0) {
     return <div>{t("no-feedback")}</div>

services/main-frontend/src/app/manage/courses/[id]/feedback/FeedbackPage.tsx

@@ -8,6 +8,7 @@ import FeedbackView from "./FeedbackView"
 
 import { fetchFeedback, markAsRead } from "@/services/backend/feedback"
 import { Feedback } from "@/shared-module/common/bindings"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import Spinner from "@/shared-module/common/components/Spinner"
 import { PaginationInfo } from "@/shared-module/common/hooks/usePaginationInfo"
@@ -43,10 +44,20 @@ const FeedbackPage: React.FC<React.PropsWithChildren<Props>> = ({
     return <ErrorBanner variant={"readOnly"} error={getFeedbackList.error} />
   }
 
-  if (getFeedbackList.isLoading || !getFeedbackList.data) {
+  if (getFeedbackList.isLoading) {
     return <Spinner variant={"medium"} />
   }
 
+  if (!getFeedbackList.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void getFeedbackList.refetch()
+        }}
+      />
+    )
+  }
+
   return (
     <ul
       className={css`

services/main-frontend/src/app/manage/courses/[id]/pages/CourseModules.tsx

@@ -13,6 +13,7 @@ import BottomPanel from "@/components/BottomPanel"
 import { submitChanges as submitModuleChanges } from "@/services/backend/course-modules"
 import { fetchCourseStructure } from "@/services/backend/courses"
 import { CompletionPolicy, ModifiedModule, NewModule } from "@/shared-module/common/bindings"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import Spinner from "@/shared-module/common/components/Spinner"
 import useToastMutation from "@/shared-module/common/hooks/useToastMutation"
@@ -520,10 +521,22 @@ const CourseModules: React.FC<Props> = ({ courseId }) => {
 
   if (courseStructureQuery.isError) {
     return <ErrorBanner variant={"link"} error={courseStructureQuery.error} />
-  } else if (courseStructureQuery.isLoading || !courseStructureQuery.data) {
+  }
+
+  if (courseStructureQuery.isLoading) {
     return <Spinner variant={"medium"} />
   }
 
+  if (!courseStructureQuery.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void courseStructureQuery.refetch()
+        }}
+      />
+    )
+  }
+
   return (
     <>
       <div

services/main-frontend/src/app/manage/courses/[id]/stats/visualizations/overview/CourseUsersCountsByExercise.tsx

@@ -11,6 +11,7 @@ import Echarts from "../../Echarts"
 import StatsHeader from "../../StatsHeader"
 
 import { fetchCourseUsersCountByExercise } from "@/services/backend/courses"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import Spinner from "@/shared-module/common/components/Spinner"
 import { baseTheme } from "@/shared-module/common/styles"
@@ -33,10 +34,20 @@ const CourseUsersCountsByExercise: React.FC<
     return <ErrorBanner variant="readOnly" error={query.error} />
   }
 
-  if (query.isLoading || !query.data) {
+  if (query.isLoading) {
     return <Spinner variant="medium" />
   }
 
+  if (!query.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void query.refetch()
+        }}
+      />
+    )
+  }
+
   const queryData = sortBy(query.data, [
     "chapter_number",
     "page_order_number",

services/main-frontend/src/app/manage/courses/[id]/stats/visualizations/user-activity/CourseSubmissionsByWeekdayAndHour.tsx

@@ -12,6 +12,7 @@ import StatsHeader from "../../StatsHeader"
 
 import { fetchCourseWeekdayHourSubmissionCounts } from "@/services/backend/courses"
 import { ExerciseSlideSubmissionCountByWeekAndHour } from "@/shared-module/common/bindings"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import DebugModal from "@/shared-module/common/components/DebugModal"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import Spinner from "@/shared-module/common/components/Spinner"
@@ -79,10 +80,20 @@ const CourseSubmissionsByWeekdayAndHour: React.FC<
     return <ErrorBanner variant={"readOnly"} error={getCourseWeekdayHourSubmissionCount.error} />
   }
 
-  if (getCourseWeekdayHourSubmissionCount.isLoading || !getCourseWeekdayHourSubmissionCount.data) {
+  if (getCourseWeekdayHourSubmissionCount.isLoading) {
     return <Spinner variant={"medium"} />
   }
 
+  if (!getCourseWeekdayHourSubmissionCount.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void getCourseWeekdayHourSubmissionCount.refetch()
+        }}
+      />
+    )
+  }
+
   if (getCourseWeekdayHourSubmissionCount.data.apiData.length === 0) {
     return <div>{t("no-data")}</div>
   }

services/main-frontend/src/app/manage/courses/[id]/user-status-summary/[user_id]/page.tsx

@@ -12,6 +12,7 @@ import CourseInstanceUserInfoBox from "@/app/manage/course-instances/[id]/points
 import CourseModuleCompletionsSection from "@/app/manage/course-instances/[id]/points/user_id/CourseModuleCompletionsSection"
 import ExerciseListSection from "@/app/manage/course-instances/[id]/points/user_id/ExerciseListSection"
 import { useExerciseStatusSummaries } from "@/hooks/useExerciseStatusSummaries"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import Spinner from "@/shared-module/common/components/Spinner"
 import { withSignedIn } from "@/shared-module/common/contexts/LoginStateContext"
@@ -28,10 +29,20 @@ const CourseExerciseStatusList: React.FC = () => {
     return <ErrorBanner variant={"readOnly"} error={exerciseStatusSummariesQuery.error} />
   }
 
-  if (exerciseStatusSummariesQuery.isLoading || !exerciseStatusSummariesQuery.data) {
+  if (exerciseStatusSummariesQuery.isLoading) {
     return <Spinner variant="medium" />
   }
 
+  if (!exerciseStatusSummariesQuery.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void exerciseStatusSummariesQuery.refetch()
+        }}
+      />
+    )
+  }
+
   const groupedByChapter = Object.entries(
     groupBy(
       exerciseStatusSummariesQuery.data,

services/main-frontend/src/app/manage/pages/[id]/history/HistoryPage.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from "react-i18next"
 import { fetchHistoryForPage } from "@/services/backend/pages"
 import { PageHistory } from "@/shared-module/common/bindings"
 import Button from "@/shared-module/common/components/Button"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import Spinner from "@/shared-module/common/components/Spinner"
 
@@ -39,10 +40,20 @@ const HistoryPage: React.FC<React.PropsWithChildren<Props>> = ({
     return <ErrorBanner variant={"readOnly"} error={getPageHistory.error} />
   }
 
-  if (getPageHistory.isLoading || !getPageHistory.data) {
+  if (getPageHistory.isLoading) {
     return <Spinner variant={"medium"} />
   }
 
+  if (!getPageHistory.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void getPageHistory.refetch()
+        }}
+      />
+    )
+  }
+
   if (getPageHistory.data.length === 0) {
     return <div>{t("error-could-not-find-edit-history-for-page")}</div>
   }

services/main-frontend/src/app/manage/regradings/[id]/page.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next"
 import FullWidthTable, { FullWidthTableRow } from "@/components/tables/FullWidthTable"
 import { fetchRegradingInfo } from "@/services/backend/regradings"
 import ProgressBar from "@/shared-module/common/components/CourseProgress/ProgressBar"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import DebugModal from "@/shared-module/common/components/DebugModal"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import Spinner from "@/shared-module/common/components/Spinner"
@@ -38,10 +39,20 @@ const ViewRegradingPage: React.FC = () => {
     return <ErrorBanner variant="readOnly" error={query.error} />
   }
 
-  if (query.isLoading || !query.data) {
+  if (query.isLoading) {
     return <Spinner variant="medium" />
   }
 
+  if (!query.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void query.refetch()
+        }}
+      />
+    )
+  }
+
   const nRegradingsReady = query.data.submission_infos.filter(
     (i) => i.grading_after_regrading?.grading_progress === "FullyGraded",
   ).length

services/main-frontend/src/app/manage/regradings/page.tsx

@@ -20,6 +20,7 @@ import {
   UserPointsUpdateStrategy,
 } from "@/shared-module/common/bindings"
 import Button from "@/shared-module/common/components/Button"
+import DataLoadError from "@/shared-module/common/components/DataLoadError"
 import DebugModal from "@/shared-module/common/components/DebugModal"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import SelectField from "@/shared-module/common/components/InputFields/SelectField"
@@ -87,10 +88,20 @@ const RegradingsPage: React.FC = () => {
     return <ErrorBanner variant="readOnly" error={regradingsQuery.error} />
   }
 
-  if (regradingsQuery.isLoading || !regradingsQuery.data) {
+  if (regradingsQuery.isLoading) {
     return <Spinner variant="medium" />
   }
 
+  if (!regradingsQuery.data) {
+    return (
+      <DataLoadError
+        onRetry={() => {
+          void regradingsQuery.refetch()
+        }}
+      />
+    )
+  }
+
   return (
     <>
       <div