Fixed spinner, disabled GC (why did I set it?!)

Author: soup-bowl

frontend/src/App.tsx

@@ -56,7 +56,7 @@ setupIonicReact({
 const queryClient = new QueryClient({
 	defaultOptions: {
 		queries: {
-			gcTime: 1000 * 60 * 60 * 24 * 24, // 24 days, the theoretical max
+			gcTime: Infinity,
 		},
 	},
 })

frontend/src/components/Fullpage.tsx

@@ -4,14 +4,26 @@ import "./Fullpage.css"
 const FullpageLoading: React.FC<{
 	loadingProgress?: number
 	loadingComplete?: number
-}> = ({ loadingProgress = undefined, loadingComplete = undefined }) => (
-	<div className="fullpage-container">
-		<IonSpinner></IonSpinner>
-		{loadingProgress && loadingComplete && (
-			<IonProgressBar value={loadingProgress / loadingComplete} color="light" />
-		)}
-	</div>
-)
+}> = ({ loadingProgress = undefined, loadingComplete = undefined }) => {
+	const calculateProgress = (progress: number, complete: number): number => {
+		return complete === 0 ? 0 : progress / complete
+	}
+
+	if (loadingProgress && loadingComplete) {
+		return (
+			<div className="fullpage-container">
+				<IonSpinner />
+				<IonProgressBar value={calculateProgress(loadingProgress, loadingComplete)} color="light" />
+			</div>
+		)
+	}
+
+	return (
+		<div className="fullpage-container">
+			<IonSpinner />
+		</div>
+	)
+}
 
 const FullpageInfo: React.FC<{ text: string }> = ({ text }) => (
 	<div className="fullpage-container">

frontend/src/pages/Collection.tsx

@@ -62,9 +62,9 @@ const filterActionButtons = [
 const CollectionPage: React.FC = () => {
 	const queryClient = useQueryClient()
 	const [present] = useIonActionSheet()
-	const [imageQuality, setImageQuality, clearImagequality] = useSettings<boolean>("ImagesAreHQ", false)
-	const [filter, setFilter] = useState<"release" | "label" | "artist" | "none">("none")
-	const [layout, setLayout] = useState<"grid" | "list">("grid")
+	const [imageQuality] = useSettings<boolean>("ImagesAreHQ", false)
+	const [filter, setFilter] = useSettings<"release" | "label" | "artist" | "none">("collectionFilter", "none")
+	const [layout, setLayout] = useSettings<"grid" | "list">("collectionLayout", "grid")
 	const [modalInfo, setModalInfo] = useState<IReleases | undefined>(undefined)
 	const [loading, setLoading] = useState<{ page: number; pages: number }>({ page: 0, pages: 0 })
 	const [viewState, setViewState] = useState<"collection" | "want">("collection")
@@ -123,7 +123,7 @@ const CollectionPage: React.FC = () => {
 			getCollectionReleases(username, token ?? "", imageQuality, (page, pages) =>
 				setLoading({ page: page, pages: pages })
 			),
-		staleTime: 1000 * 60 * 60 * 24, // 24 hours
+		staleTime: Infinity,
 	})
 
 	const wantData = useQuery<IReleases[]>({
@@ -132,7 +132,7 @@ const CollectionPage: React.FC = () => {
 			getCollectionWants(username, token ?? "", imageQuality, (page, pages) =>
 				setLoading({ page: page, pages: pages })
 			),
-		staleTime: 1000 * 60 * 60 * 24, // 24 hours
+		staleTime: Infinity,
 	})
 
 	useEffect(() => {

frontend/src/pages/Search.tsx

@@ -23,7 +23,7 @@ interface IReleaseCollective {
 }
 
 const SearchPage: React.FC = () => {
-	const [imageQuality, setImageQuality, clearImagequality] = useSettings<boolean>("ImagesAreHQ", false)
+	const [imageQuality] = useSettings<boolean>("ImagesAreHQ", false)
 	const [searchTerm, setSearchTerm] = useState<string>("")
 	const [modalInfo, setModalInfo] = useState<{ data: IReleases; type: "collection" | "want" } | undefined>(undefined)
 	const [filterData, setFilterData] = useState<IReleaseCollective>({ collection: [], want: [] })
@@ -45,13 +45,13 @@ const SearchPage: React.FC = () => {
 	const collectionData = useQuery<IReleases[]>({
 		queryKey: [`${username}collection`],
 		queryFn: () => getCollectionReleases(username, token ?? "", imageQuality),
-		staleTime: 1000 * 60 * 60 * 24, // 24 hours
+		staleTime: Infinity,
 	})
 
 	const wantData = useQuery<IReleases[]>({
 		queryKey: [`${username}want`],
 		queryFn: () => getCollectionWants(username, token ?? "", imageQuality),
-		staleTime: 1000 * 60 * 60 * 24, // 24 hours
+		staleTime: Infinity,
 	})
 
 	const searchData = (search: string) => {