Merge pull request #15 from ente-io/first-load-ux
show alert message and loader on first load
This commit is contained in:
commit
ec56e0f5b4
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue