diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx
index 6280676fc..028c5dfbc 100644
--- a/src/pages/gallery/index.tsx
+++ b/src/pages/gallery/index.tsx
@@ -30,6 +30,7 @@ import {
 } from 'services/collectionService';
 import constants from 'utils/strings/constants';
 import ErrorAlert from './components/ErrorAlert';
+import { Alert } from 'react-bootstrap';
 
 const DATE_CONTAINER_HEIGHT = 45;
 const IMAGE_CONTAINER_HEIGHT = 200;
@@ -107,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,
@@ -133,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(
@@ -146,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);
         };
@@ -295,9 +293,20 @@ export default function Gallery(props) {
         }
     };
 
-    if (!data || loading) {
+    if (!data) {
+        return <div />;
+    }
+    if (data.length == 0) {
         return (
             <div className="text-center">
+                <LoadingBar
+                    color="#2dc262"
+                    progress={progress}
+                    onLoaderFinished={() => setProgress(0)}
+                />
+                <Alert variant="primary">
+                    {constants.INITIAL_LOAD_DELAY_WARNING}
+                </Alert>
             </div>
         );
     }
@@ -429,7 +438,7 @@ export default function Gallery(props) {
                                 <List
                                     itemSize={(index) =>
                                         timeStampList[index].itemType ===
-                                            ITEM_TYPE.TIME
+                                        ITEM_TYPE.TIME
                                             ? DATE_CONTAINER_HEIGHT
                                             : IMAGE_CONTAINER_HEIGHT
                                     }
@@ -446,14 +455,14 @@ export default function Gallery(props) {
                                                     columns={
                                                         timeStampList[index]
                                                             .itemType ===
-                                                            ITEM_TYPE.TIME
+                                                        ITEM_TYPE.TIME
                                                             ? 1
                                                             : columns
                                                     }
                                                 >
                                                     {timeStampList[index]
                                                         .itemType ===
-                                                        ITEM_TYPE.TIME ? (
+                                                    ITEM_TYPE.TIME ? (
                                                         <DateContainer>
                                                             {
                                                                 timeStampList[
@@ -472,7 +481,7 @@ export default function Gallery(props) {
                                                                         index
                                                                     ]
                                                                         .itemStartIndex +
-                                                                    idx
+                                                                        idx
                                                                 );
                                                             }
                                                         )
diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx
index a8fe0adec..0bb739933 100644
--- a/src/utils/strings/englishConstants.tsx
+++ b/src/utils/strings/englishConstants.tsx
@@ -59,15 +59,22 @@ const englishConstants = {
     },
     OF: 'of',
     SUBSCRIPTION_EXPIRED:
-        "your subscription has expired, please renew it form the mobile app",
+        'your subscription has expired, please renew it form the mobile app',
     STORAGE_QUOTA_EXCEEDED:
         'you have exceeded your storage quota, please upgrade your plan from the mobile app',
+    INITIAL_LOAD_DELAY_WARNING: 'Please wait, intial load may take some time',
+
     WEB_SIGNUPS_DISABLED: () => (
-        <div>sorry signups are possibly only on the <a href="https://ente.io/app" target="_blank">mobile app</a></div>
+        <div>
+            sorry signups are possibly only on the{' '}
+            <a href="https://ente.io/app" target="_blank">
+                mobile app
+            </a>
+        </div>
     ),
     USER_DOES_NOT_EXIST: 'sorry, could not find a user with that email',
     UPLOAD_BUTTON_TEXT: 'upload',
-    NO_ACCOUNT: 'don\'t have an account?',
+    NO_ACCOUNT: "don't have an account?",
     ALBUM_NAME: 'album name',
     CREATE: 'create',
 };