beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #15 from ente-io/first-load-ux

Browse source 
show alert message and loader on first load
This commit is contained in:
Abhinav-grd 2021-02-15 20:47:39 +05:30 committed by GitHub
parent b0937d1a7e 314c939c30
commit ec56e0f5b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/pages/gallery/index.tsx
View file

@ -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
);
}
)

13
src/utils/strings/englishConstants.tsx
View file

@ -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',
};