Add offline message to query loading error

Author: sjd210

src/app/components/elements/Book.tsx

@@ -50,15 +50,15 @@ export const Book = ({match: {params: {bookId}}}: BookProps) => {
         <SidebarLayout>
             <ShowLoadingQuery
                 query={bookIndexPageQuery}
-                defaultErrorTitle="Unable to load book contents."
+                defaultErrorTitle="Unable to load book contents"
                 thenRender={(definedBookIndexPage) => {
                     return <>
                         <BookSidebar book={definedBookIndexPage} urlBookId={bookId} pageId={pageId} />
                         <MainContent className="mt-4">
                             {pageId 
                                 ? <ShowLoadingQuery
                                     query={bookDetailPageQuery}
-                                    defaultErrorTitle="Unable to load book page."
+                                    defaultErrorTitle="Unable to load book page"
                                     thenRender={(bookDetailPage) => <BookPage page={bookDetailPage} />}
                                 />
                                 : <>

src/app/components/handlers/ShowLoadingQuery.tsx

@@ -15,10 +15,10 @@ const loadingPlaceholder = <div className="w-100 text-center pb-2">
 export const DefaultQueryError = ({error, title}: {error?: FetchBaseQueryError | SerializedError, title: string}) => {
     const errorDetails = getRTKQueryErrorMessage(error);
     return <Alert color={"warning"} className={"my-2"}>
-        {title ?? "Error fetching data from server"}: {errorDetails.message}
+        {title ?? "Error fetching data from server"}: {window.navigator.onLine ? errorDetails.message : "You appear to be offline."}
         {errorDetails.status ? <><br/>Status code: {errorDetails.status}</> : ""}
         <br/>
-        You may want to refresh the page, or <a href={`mailto:${WEBMASTER_EMAIL}`}>email</a> us if
+        You may want to{!window.navigator.onLine && " check your internet connection,"} refresh the page, or <a href={`mailto:${WEBMASTER_EMAIL}`}>email</a> us if
         this continues to happen.
         Please include in your email the name and email associated with this{" "}
         {SITE_TITLE} account, alongside the details of the error given above.