Show message if loading own comments is taking >10s

static/app-strings.json

@@ -2957,6 +2957,7 @@
   "Credits: %credits%": "Credits: %credits%",
   "Publications: %claims%": "Publications: %claims%",
   "Channels:": "Channels",
+  "Larger comment histories may take time to load": "Larger comment histories may take time to load",
 
   "--end--": "--end--"
 }

ui/page/ownComments/view.jsx

@@ -44,6 +44,21 @@ export default function OwnComments(props: Props) {
   const spinnerRef = React.useRef();
   const [page, setPage] = React.useState(0);
   const [activeChannelId, setActiveChannelId] = React.useState('');
+  const [isLoadingLong, setIsLoadingLong] = React.useState(false);
+  const loadingTimingTimeoutId = React.useRef(null);
+  handleLogicForCheckingLongLoadingTime();
+
+  function handleLogicForCheckingLongLoadingTime() {
+    if (isFetchingComments && !loadingTimingTimeoutId.current) {
+      loadingTimingTimeoutId.current = setTimeout(() => {
+        setIsLoadingLong(true);
+      }, 10000);
+    } else if (!isFetchingComments && loadingTimingTimeoutId.current) {
+      clearTimeout(loadingTimingTimeoutId.current);
+      setIsLoadingLong(false);
+      loadingTimingTimeoutId.current = null;
+    }
+  }
 
   // Since we are sharing the key for Discussion and MyComments, don't show
   // the list until we've gone through the initial reset.
@@ -188,6 +203,7 @@ export default function OwnComments(props: Props) {
             {(isFetchingComments || moreBelow) && (
               <div className="main--empty" ref={spinnerRef}>
                 <Spinner type="small" />
+                {isLoadingLong && <p>{__('Larger comment histories may take time to load')}</p>}
               </div>
             )}
           </>