From 314c939c308ffdccd2324ef9cce0e47ace7a1325 Mon Sep 17 00:00:00 2001
From: Abhinav-grd <abhinavk.grd@gmail.com>
Date: Mon, 15 Feb 2021 20:00:26 +0530
Subject: [PATCH] show loadingbar for initial load

---
 src/pages/gallery/index.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx
index b7592334f..028c5dfbc 100644
--- a/src/pages/gallery/index.tsx
+++ b/src/pages/gallery/index.tsx
@@ -108,7 +108,6 @@ const DateContainer = styled.div`
 
 export default function Gallery(props) {
     const router = useRouter();
-    const [loading, setLoading] = useState(false);
     const [collections, setCollections] = useState<collection[]>([]);
     const [
         collectionAndItsLatestFile,
@@ -134,7 +133,6 @@ export default function Gallery(props) {
             router.push('/');
         }
         const main = async () => {
-            setLoading(true);
             const data = await localFiles();
             const collections = await getLocalCollections();
             const collectionAndItsLatestFile = await getCollectionAndItsLatestFile(
@@ -147,8 +145,7 @@ export default function Gallery(props) {
             const favItemIds = await getFavItemIds(data);
             setFavItemIds(favItemIds);
 
-            setLoading(false);
-            setProgress(80);
+            data.length == 0 ? setProgress(20) : setProgress(80);
             await syncWithRemote();
             setProgress(100);
         };
@@ -296,14 +293,20 @@ export default function Gallery(props) {
         }
     };
 
-    if (!data || loading || data.length == 0) {
+    if (!data) {
+        return <div />;
+    }
+    if (data.length == 0) {
         return (
             <div className="text-center">
-                {data?.length == 0 && (
-                    <Alert variant="primary">
-                        {constants.INITIAL_LOAD_DELAY_WARNING}
-                    </Alert>
-                )}
+                <LoadingBar
+                    color="#2dc262"
+                    progress={progress}
+                    onLoaderFinished={() => setProgress(0)}
+                />
+                <Alert variant="primary">
+                    {constants.INITIAL_LOAD_DELAY_WARNING}
+                </Alert>
             </div>
         );
     }