refactor: tuck main loading skeleton for filter into base definition

Parkreiner · Parkreiner · commit 32118056be80 · 2024-09-05T18:19:19.000Z
diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
@@ -135,7 +135,7 @@ export const MenuSkeleton: FC = () => {
 
 type FilterProps = {
 	filter: ReturnType<typeof useFilter>;
-	skeleton: ReactNode;
+	optionsSkeleton: ReactNode;
 	isLoading: boolean;
 	learnMoreLink?: string;
 	learnMoreLabel2?: string;
@@ -150,7 +150,7 @@ export const Filter: FC<FilterProps> = ({
 	filter,
 	isLoading,
 	error,
-	skeleton,
+	optionsSkeleton,
 	options,
 	learnMoreLink,
 	learnMoreLabel2,
@@ -195,7 +195,10 @@ export const Filter: FC<FilterProps> = ({
 			}}
 		>
 			{isLoading ? (
-				skeleton
+				<>
+					<SearchFieldSkeleton />
+					{optionsSkeleton}
+				</>
 			) : (
 				<>
 					<InputGroup css={{ width: "100%" }}>
diff --git a/site/src/pages/AuditPage/AuditFilter.tsx b/site/src/pages/AuditPage/AuditFilter.tsx
@@ -51,8 +51,8 @@ interface AuditFilterProps {
 }
 
 export const AuditFilter: FC<AuditFilterProps> = ({ filter, error, menus }) => {
-	// Use a smaller width if including the organization filter.
-	const width = menus.organization && 175;
+	const width = menus.organization ? 175 : undefined;
+
 	return (
 		<Filter
 			learnMoreLink={docs("/admin/audit-logs#filtering-logs")}
@@ -71,9 +71,9 @@ export const AuditFilter: FC<AuditFilterProps> = ({ filter, error, menus }) => {
 					)}
 				</>
 			}
-			skeleton={
+			optionsSkeleton={
 				<>
-					<SearchFieldSkeleton />
+					<MenuSkeleton />
 					<MenuSkeleton />
 					<MenuSkeleton />
 					<MenuSkeleton />
diff --git a/site/src/pages/TemplatesPage/TemplatesFilter.tsx b/site/src/pages/TemplatesPage/TemplatesFilter.tsx
@@ -64,12 +64,7 @@ export const TemplatesFilter: FC<TemplatesFilterProps> = ({
 					/>
 				</>
 			}
-			skeleton={
-				<>
-					<SearchFieldSkeleton />
-					<MenuSkeleton />
-				</>
-			}
+			optionsSkeleton={<MenuSkeleton />}
 		/>
 	);
 };
diff --git a/site/src/pages/UsersPage/UsersFilter.tsx b/site/src/pages/UsersPage/UsersFilter.tsx
@@ -78,12 +78,7 @@ export const UsersFilter: FC<UsersFilterProps> = ({ filter, error, menus }) => {
 			filter={filter}
 			error={error}
 			options={<StatusMenu {...menus.status} />}
-			skeleton={
-				<>
-					<SearchFieldSkeleton />
-					<MenuSkeleton />
-				</>
-			}
+			optionsSkeleton={<MenuSkeleton />}
 		/>
 	);
 };
diff --git a/site/src/pages/WorkspacesPage/filter/filter.tsx b/site/src/pages/WorkspacesPage/filter/filter.tsx
@@ -1,10 +1,5 @@
 import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
-import {
-	Filter,
-	MenuSkeleton,
-	SearchFieldSkeleton,
-	type useFilter,
-} from "components/Filter/filter";
+import { type useFilter, Filter, MenuSkeleton } from "components/Filter/filter";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import type { FC } from "react";
 import { docs } from "utils/docs";
@@ -97,9 +92,8 @@ export const WorkspacesFilter: FC<WorkspaceFilterProps> = ({
 					<StatusMenu {...menus.status} />
 				</>
 			}
-			skeleton={
+			optionsSkeleton={
 				<>
-					<SearchFieldSkeleton />
 					{menus.user && <MenuSkeleton />}
 					<MenuSkeleton />
 					<MenuSkeleton />
