Merge pull request #16780 from overleaf/jdt-wf-load-notif

Writefull loading and retry notifications

GitOrigin-RevId: ad4701c929970da37abdd96e070b67eac57fb54b

services/web/frontend/extracted-translations.json

@@ -681,6 +681,7 @@
   "loading_github_repositories": "",
   "loading_prices": "",
   "loading_recent_github_commits": "",
+  "loading_writefull": "",
   "log_entry_description": "",
   "log_entry_maximum_entries": "",
   "log_entry_maximum_entries_enable_stop_on_first_error": "",
@@ -1500,6 +1501,8 @@
   "writefull": "",
   "writefull_disable_prompt_body": "",
   "writefull_learn_more": "",
+  "writefull_loading_error_body": "",
+  "writefull_loading_error_title": "",
   "writefull_prompt_body": "",
   "writefull_prompt_title": "",
   "writefull_settings_description": "",

services/web/frontend/js/shared/components/loading-spinner.tsx

@@ -2,7 +2,13 @@ import { useTranslation } from 'react-i18next'
 import Icon from './icon'
 import { useEffect, useState } from 'react'
 
-function LoadingSpinner({ delay = 0 }) {
+function LoadingSpinner({
+  delay = 0,
+  loadingText,
+}: {
+  delay?: 0 | 500 // 500 is our standard delay
+  loadingText?: string
+}) {
   const { t } = useTranslation()
 
   const [show, setShow] = useState(false)
@@ -25,7 +31,7 @@ function LoadingSpinner({ delay = 0 }) {
     <div className="loading">
       <Icon type="refresh" fw spin />
       &nbsp;
-      {t('loading')}…
+      {loadingText || t('loading')}…
     </div>
   )
 }
@@ -35,13 +41,15 @@ export default LoadingSpinner
 export function FullSizeLoadingSpinner({
   delay = 0,
   minHeight,
+  loadingText,
 }: {
-  delay?: number
+  delay?: 0 | 500
   minHeight?: string
+  loadingText?: string
 }) {
   return (
     <div className="full-size-loading-spinner-container" style={{ minHeight }}>
-      <LoadingSpinner delay={delay} />
+      <LoadingSpinner loadingText={loadingText} delay={delay} />
     </div>
   )
 }

services/web/frontend/js/shared/context/editor-context.tsx

@@ -46,6 +46,8 @@ export const EditorContext = createContext<
       inactiveTutorials: [string]
       currentPopup: string | null
       setCurrentPopup: Dispatch<SetStateAction<string | null>>
+      writefullAdClicked: boolean
+      setWritefullAdClicked: Dispatch<SetStateAction<boolean>>
     }
   | undefined
 >(undefined)
@@ -84,6 +86,8 @@ export const EditorProvider: FC = ({ children }) => {
     getMeta('ol-inactiveTutorials', [])
   )
 
+  const [writefullAdClicked, setWritefullAdClicked] = useState(false)
+
   const [currentPopup, setCurrentPopup] = useState<string | null>(null)
 
   const deactivateTutorial = useCallback(
@@ -175,6 +179,8 @@ export const EditorProvider: FC = ({ children }) => {
       deactivateTutorial,
       currentPopup,
       setCurrentPopup,
+      writefullAdClicked,
+      setWritefullAdClicked,
     }),
     [
       cobranding,
@@ -192,6 +198,8 @@ export const EditorProvider: FC = ({ children }) => {
       deactivateTutorial,
       currentPopup,
       setCurrentPopup,
+      writefullAdClicked,
+      setWritefullAdClicked,
     ]
   )
 

services/web/frontend/stylesheets/modules/writefull.less

@@ -1,3 +1,15 @@
 .writefull-logo-bg {
   background-color: #fff;
 }
+.writefull-loading-bar {
+  font-size: @font-size-small;
+  height: 40px;
+  justify-content: center;
+}
+
+.writefull-error-notification {
+  margin: 48px 64px;
+  width: 100%;
+  max-width: 520px;
+  text-align: left;
+}

services/web/locales/en.json

@@ -1025,6 +1025,7 @@
   "loading_github_repositories": "Loading your GitHub repositories",
   "loading_prices": "loading prices",
   "loading_recent_github_commits": "Loading recent commits",
+  "loading_writefull": "Loading Writefull",
   "log_entry_description": "Log entry with level: __level__",
   "log_entry_maximum_entries": "Maximum log entries limit hit",
   "log_entry_maximum_entries_enable_stop_on_first_error": "Try to fix the first error and recompile. Often one error causes many later error messages. You can <0>Enable “Stop on first error”</0> to focus on fixing errors. We recommend fixing errors as soon as possible; letting them accumulate may lead to hard-to-debug and fatal errors. <1>Learn more</1>",
@@ -2161,6 +2162,8 @@
   "writefull": "Writefull",
   "writefull_disable_prompt_body": "Writefull is enabled. You can switch it on or off in the account settings anytime.",
   "writefull_learn_more": "Learn more about Writefull for Overleaf",
+  "writefull_loading_error_body": "Try refreshing the page. If this doesn’t work, try disabling any active browser extensions to check they aren’t blocking Writefull from loading.",
+  "writefull_loading_error_title": "Writefull didn’t load correctly",
   "writefull_prompt_body": "Turn on the new Writefull integration to get free AI-powered language feedback specifically tailored to research writing.",
   "writefull_prompt_title": "AI writing assistance in Overleaf",
   "writefull_settings_description": "Get free AI-based language feedback specifically tailored for research writing with Writefull for Overleaf.",