From 522deccb62f6b88e1b16669719c9c05d8526e08c Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Mon, 5 Dec 2022 15:36:43 +0100
Subject: [PATCH 1/3] Add loading indicator text when loading large code files

---
 .../web/src/repo/blob/BlobLoadingSpinner.tsx  | 62 +++++++++++++++++++
 client/web/src/repo/blob/BlobPage.tsx         |  7 +--
 2 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 client/web/src/repo/blob/BlobLoadingSpinner.tsx

diff --git a/client/web/src/repo/blob/BlobLoadingSpinner.tsx b/client/web/src/repo/blob/BlobLoadingSpinner.tsx
new file mode 100644
index 000000000000..368c7bf5c384
--- /dev/null
+++ b/client/web/src/repo/blob/BlobLoadingSpinner.tsx
@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react'
+
+import { useLocation } from 'react-router'
+
+import { Link, LoadingSpinner } from '@sourcegraph/wildcard'
+
+export function BlobLoadingSpinner(): JSX.Element {
+    const [afterOneSec, setAfterOneSec] = useState(false)
+    const [afterThreeSec, setAfterThreeSec] = useState(false)
+    const [afterSixSec, setAfterSixSec] = useState(false)
+    const [afterNineSec, setAfterNineSec] = useState(false)
+
+    useEffect(() => {
+        const timeout = setTimeout(() => setAfterOneSec(true), 1000)
+        return () => clearTimeout(timeout)
+    }, [])
+    useEffect(() => {
+        const timeout = setTimeout(() => setAfterThreeSec(true), 3000)
+        return () => clearTimeout(timeout)
+    }, [])
+    useEffect(() => {
+        const timeout = setTimeout(() => setAfterSixSec(true), 6000)
+        return () => clearTimeout(timeout)
+    }, [])
+    useEffect(() => {
+        const timeout = setTimeout(() => setAfterNineSec(true), 9000)
+        return () => clearTimeout(timeout)
+    }, [])
+
+    const location = useLocation()
+
+    return (
+        <div className="d-flex mt-3 justify-content-center">
+            {afterOneSec ? (
+                <div className="d-flex flex-column align-items-center">
+                    <LoadingSpinner />
+                    <div className="text-muted mt-2">
+                        {afterNineSec ? (
+                            <>
+                                It’s taking much longer than expected to load this file. Try{' '}
+                                <Link to={location.pathname} onClick={reload}>
+                                    reloading the page
+                                </Link>
+                            </>
+                        ) : afterSixSec ? (
+                            'Loading a whole lot of bits and bytes here...'
+                        ) : afterThreeSec ? (
+                            'Loading a large file...'
+                        ) : (
+                            ''
+                        )}
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    )
+}
+
+function reload(event: React.MouseEvent<HTMLAnchorElement>): void {
+    window.location.reload()
+    event.preventDefault()
+}
diff --git a/client/web/src/repo/blob/BlobPage.tsx b/client/web/src/repo/blob/BlobPage.tsx
index 5c5769ac1ab8..8b73c2ec594f 100644
--- a/client/web/src/repo/blob/BlobPage.tsx
+++ b/client/web/src/repo/blob/BlobPage.tsx
@@ -66,6 +66,7 @@ import { ToggleRenderedFileMode } from './actions/ToggleRenderedFileMode'
 import { getModeFromURL } from './actions/utils'
 import { fetchBlob, fetchStencil } from './backend'
 import { Blob, BlobInfo } from './Blob'
+import { BlobLoadingSpinner } from './BlobLoadingSpinner'
 import { Blob as CodeMirrorBlob } from './CodeMirrorBlob'
 import { GoToRawAction } from './GoToRawAction'
 import { BlobPanel } from './panel/BlobPanel'
@@ -441,11 +442,7 @@ export const BlobPage: React.FunctionComponent<React.PropsWithChildren<BlobPageP
         return (
             <div className={styles.placeholder}>
                 {alwaysRender}
-                {!enableLazyBlobSyntaxHighlighting && (
-                    <div className="d-flex mt-3 justify-content-center">
-                        <LoadingSpinner />
-                    </div>
-                )}
+                {!enableLazyBlobSyntaxHighlighting && <BlobLoadingSpinner />}
             </div>
         )
     }

From 30edd233e0214c810811fde97338da30e29b804f Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Tue, 6 Dec 2022 11:48:45 +0100
Subject: [PATCH 2/3] Update client/web/src/repo/blob/BlobLoadingSpinner.tsx

Co-authored-by: Laura Hacker <laura.hacker@sourcegraph.com>
---
 client/web/src/repo/blob/BlobLoadingSpinner.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/web/src/repo/blob/BlobLoadingSpinner.tsx b/client/web/src/repo/blob/BlobLoadingSpinner.tsx
index 368c7bf5c384..267dbe065c5b 100644
--- a/client/web/src/repo/blob/BlobLoadingSpinner.tsx
+++ b/client/web/src/repo/blob/BlobLoadingSpinner.tsx
@@ -40,7 +40,7 @@ export function BlobLoadingSpinner(): JSX.Element {
                                 It’s taking much longer than expected to load this file. Try{' '}
                                 <Link to={location.pathname} onClick={reload}>
                                     reloading the page
-                                </Link>
+                                </Link>.
                             </>
                         ) : afterSixSec ? (
                             'Loading a whole lot of bits and bytes here...'

From a0cb49b4db94839a0e4d535d9f31f3cdcb18a102 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Tue, 6 Dec 2022 15:26:07 +0100
Subject: [PATCH 3/3] Prettier

---
 client/web/src/repo/blob/BlobLoadingSpinner.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/web/src/repo/blob/BlobLoadingSpinner.tsx b/client/web/src/repo/blob/BlobLoadingSpinner.tsx
index 267dbe065c5b..cbbc173a2b8e 100644
--- a/client/web/src/repo/blob/BlobLoadingSpinner.tsx
+++ b/client/web/src/repo/blob/BlobLoadingSpinner.tsx
@@ -40,7 +40,8 @@ export function BlobLoadingSpinner(): JSX.Element {
                                 It’s taking much longer than expected to load this file. Try{' '}
                                 <Link to={location.pathname} onClick={reload}>
                                     reloading the page
-                                </Link>.
+                                </Link>
+                                .
                             </>
                         ) : afterSixSec ? (
                             'Loading a whole lot of bits and bytes here...'