From 6f65f6a217e5e01fc617030e84fe15bb7d66e2de Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 29 Sep 2019 15:25:23 -0700
Subject: [PATCH] Don't crash the browser as hard when loading a directory with
 more than 250 files

---
 .../server/files/FileManagerContainer.tsx        | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index dfacbd1df..640527cef 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -79,7 +79,21 @@ export default () => {
                             :
                             <CSSTransition classNames={'fade'} timeout={250} appear={true} in={true}>
                                 <div>
-                                    {
+                                    {files.length > 250 ?
+                                        <React.Fragment>
+                                            <div className={'rounded bg-yellow-400 mb-px p-3'}>
+                                                <p className={'text-yellow-900 text-sm text-center'}>
+                                                    This directory is too large to display in the browser, limiting
+                                                    the output to the first 250 files.
+                                                </p>
+                                            </div>
+                                            {
+                                                files.slice(0, 500).map(file => (
+                                                    <FileObjectRow key={file.uuid} file={file}/>
+                                                ))
+                                            }
+                                        </React.Fragment>
+                                        :
                                         files.map(file => (
                                             <FileObjectRow key={file.uuid} file={file}/>
                                         ))