[ENG-1816] Fix explorer rendering (#2589)

* Fix explorer intial render

update dep

Make sure it runs only once

make sure to include loading value in other explorer routes

rewrite condition to prevent loop

* fix style formatting

interface/app/$libraryId/Explorer/View/GridView/index.tsx

@@ -1,5 +1,5 @@
 import { Grid, useGrid } from '@virtual-grid/react';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useExplorerLayoutStore } from '@sd/client';
 
 import { useExplorerContext } from '../../Context';

interface/app/$libraryId/Explorer/View/index.tsx

@@ -5,6 +5,7 @@ import {
 	ExplorerLayout,
 	explorerLayout,
 	getItemObject,
+	useExplorerLayoutStore,
 	useSelector,
 	type Object
 } from '@sd/client';
@@ -51,6 +52,7 @@ export const View = ({ emptyNotice, ...contextProps }: ExplorerViewProps) => {
 
 	const quickPreview = useQuickPreviewContext();
 	const quickPreviewStore = useQuickPreviewStore();
+	const layoutStore = useExplorerLayoutStore();
 
 	const [{ path }] = useExplorerSearchParams();
 
@@ -59,6 +61,7 @@ export const View = ({ emptyNotice, ...contextProps }: ExplorerViewProps) => {
 	const ref = useRef<HTMLDivElement | null>(null);
 
 	const [showLoading, setShowLoading] = useState(false);
+	const [forceRender, setForceRender] = useState(0);
 
 	const selectable =
 		explorer.selectable &&
@@ -115,6 +118,13 @@ export const View = ({ emptyNotice, ...contextProps }: ExplorerViewProps) => {
 		} else setShowLoading(false);
 	}, [explorer.isFetchingNextPage]);
 
+	// this makes sure that the grid is re-rendered
+	// with the correct padding when the tags are toggled
+	// also fixes a bug where grid items would not render initially
+	useEffect(() => {
+		if (forceRender === 0) setForceRender((prev) => prev + 1);
+	}, [layoutStore.showTags, explorer.isFetching, forceRender]);
+
 	useEffect(() => {
 		if (explorer.layouts[layoutMode]) return;
 		// If the current layout mode is not available, switch to the first available layout mode

interface/app/$libraryId/Explorer/useExplorer.ts

@@ -41,6 +41,7 @@ export interface UseExplorerProps<TOrder extends Ordering> {
 	parent?: ExplorerParent;
 	loadMore?: () => void;
 	isFetchingNextPage?: boolean;
+	isFetching?: boolean;
 	isLoadingPreferences?: boolean;
 	scrollRef?: RefObject<HTMLDivElement>;
 	overscan?: number;

interface/app/$libraryId/favorites.tsx

@@ -45,6 +45,7 @@ export function Component() {
 	const explorer = useExplorer({
 		...items,
 		isFetchingNextPage: items.query.isFetchingNextPage,
+		isFetching: items.query.isFetching,
 		settings: explorerSettings
 	});
 

interface/app/$libraryId/location/$id.tsx

@@ -102,6 +102,7 @@ const LocationExplorer = ({ location }: { location: Location; path?: string }) =
 	const explorer = useExplorer({
 		...items,
 		isFetchingNextPage: items.query.isFetchingNextPage,
+		isFetching: items.query.isFetching,
 		isLoadingPreferences: preferences.isLoading,
 		settings: explorerSettings,
 		parent: { type: 'Location', location }

interface/app/$libraryId/recents.tsx

@@ -44,6 +44,7 @@ export function Component() {
 
 	const explorer = useExplorer({
 		...items,
+		isFetching: items.query.isFetching,
 		isFetchingNextPage: items.query.isFetchingNextPage,
 		settings: explorerSettings
 	});

interface/app/$libraryId/tag/$id.tsx

@@ -43,6 +43,7 @@ export function Component() {
 	const explorer = useExplorer({
 		...items,
 		isFetchingNextPage: items.query.isFetchingNextPage,
+		isFetching: items.query.isFetching,
 		isLoadingPreferences: preferences.isLoading,
 		settings: explorerSettings,
 		parent: { type: 'Tag', tag: tag }