Use MajorErrorMessage for search result errors

It'd be nice to customize the message a bit, but this should be rare
and I'd prefer the simplicity of just going with the default text.

I ran into this when I made a mistake in how I process the return value
of search results, so React Query caught and raised the error via
React, as intended! And I was annoyed that it wasn't logged anywhere,
so that's my motivation for this change—but also, the old message is
pretty meh and has some layout problems anyway.

app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js

@@ -4,6 +4,7 @@ import { Box, Text, useColorModeValue, VisuallyHidden } from "@chakra-ui/react";
 import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
 import PaginationToolbar from "../components/PaginationToolbar";
 import { useSearchResults } from "./useSearchResults";
+import { MajorErrorMessage } from "../util";
 
 export const SEARCH_PER_PAGE = 30;
 
@@ -134,17 +135,8 @@ function SearchResults({
 
   const searchPanelBackground = useColorModeValue("white", "gray.900");
 
-  // If the results aren't ready, we have some special case UI!
   if (error) {
-    return (
+    return <MajorErrorMessage error={error} variant="network" />;
-      <Text>
-        We hit an error trying to load your search results{" "}
-        <span role="img" aria-label="(sweat emoji)">
-          😓
-        </span>{" "}
-        Try again?
-      </Text>
-    );
   }
 
   // Finally, render the item list, with checkboxes and Item components!