Files
grungnet/src/contexts/MapLoadingContext.js
Mitchell McCaffrey a81031e84e Moved map asset loading progress to use refs to stop re-renders
Moved map loading overlay to use animation frames for a smooth progress bar
2020-06-28 13:37:04 +10:00

57 lines
1.4 KiB
JavaScript

import React, { useState, useRef } from "react";
import { omit, isEmpty } from "../helpers/shared";
const MapLoadingContext = React.createContext();
export function MapLoadingProvider({ children }) {
const [loadingAssetCount, setLoadingAssetCount] = useState(0);
function assetLoadStart() {
setLoadingAssetCount((prevLoadingAssets) => prevLoadingAssets + 1);
}
function assetLoadFinish() {
setLoadingAssetCount((prevLoadingAssets) => prevLoadingAssets - 1);
}
const assetProgressRef = useRef({});
const loadingProgressRef = useRef(null);
function assetProgressUpdate({ id, count, total }) {
if (count === total) {
assetProgressRef.current = omit(assetProgressRef.current, [id]);
} else {
assetProgressRef.current = {
...assetProgressRef.current,
[id]: { count, total },
};
}
if (!isEmpty(assetProgressRef.current)) {
let total = 0;
let count = 0;
for (let progress of Object.values(assetProgressRef.current)) {
total += progress.total;
count += progress.count;
}
loadingProgressRef.current = count / total;
}
}
const isLoading = loadingAssetCount > 0;
const value = {
assetLoadStart,
assetLoadFinish,
isLoading,
assetProgressUpdate,
loadingProgressRef,
};
return (
<MapLoadingContext.Provider value={value}>
{children}
</MapLoadingContext.Provider>
);
}
export default MapLoadingContext;