add suspense + fix mj v6.0 naming

flosrn · Jan 24, 2024 · 427b047 · 427b047 · vercel · Jan 24, 2024
1 parent bcaaaff
commit 427b047
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/app/(playground)/playground/components/sidebar/selectors/version-selector.tsx b/app/(playground)/playground/components/sidebar/selectors/version-selector.tsx
@@ -32,11 +32,11 @@ const VersionSelector = () => {
       disabled={isVersionSelectorDisabled}
     >
       <SelectTrigger>
-        <SelectValue id="version-selector" placeholder="Version 6" />
+        <SelectValue id="version-selector" placeholder="Version 6.0" />
       </SelectTrigger>
       <SelectContent>
         <SelectGroup>
-          <SelectItem value="--v 6">Version 6</SelectItem>
+          <SelectItem value="--v 6.0">Version 6</SelectItem>
           <SelectItem value="--v 5.2">Version 5.2</SelectItem>
           <SelectItem value="--v 5.1">Version 5.1</SelectItem>
           <SelectItem value="--v 5">Version 5</SelectItem>

diff --git a/app/(playground)/playground/page.tsx b/app/(playground)/playground/page.tsx
@@ -13,9 +13,7 @@ export default async function CreatePage() {
         defaultValue={DisplayMode.STACK}
         className="md:grid md:h-full md:grid-cols-[265px,minmax(auto,1fr)]"
       >
-        <Suspense>
-          <SideColumn />
-        </Suspense>
+        <SideColumn />
         <Suspense>
           <MainColumn />
         </Suspense>

diff --git a/app/(playground)/playground/side-column.tsx b/app/(playground)/playground/side-column.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { LayersIcon, LayoutGridIcon } from "lucide-react";
 
 import { ScrollArea } from "~/components/ui/scroll-area";
@@ -25,17 +25,19 @@ const SideColumn = ({ className }: SidebarProps) => (
       />
       <TabsList className="hidden grid-cols-2 md:grid">
         <TabsTrigger value={DisplayMode.STACK}>
-          <LayersIcon className="h-4 w-4" />
+          <LayersIcon className="size-4" />
         </TabsTrigger>
         <TabsTrigger value={DisplayMode.GRID}>
-          <LayoutGridIcon className="h-4 w-4" />
+          <LayoutGridIcon className="size-4" />
         </TabsTrigger>
       </TabsList>
       <LabelWithTooltip
         title="Style Filter"
         description="Experiment with different pre-defined styles that can be applied to your image."
       />
-      <FilterSelector />
+      <Suspense>
+        <FilterSelector />
+      </Suspense>
       <Separator />
 
       <LabelWithTooltip

diff --git a/app/(playground)/playground/store/versionStore.ts b/app/(playground)/playground/store/versionStore.ts
@@ -12,7 +12,7 @@ type VersionAction = {
 
 export const useVersionStore = create<VersionAction & VersionState>()(
   (set) => ({
-    versionValue: "--v 6",
+    versionValue: "--v 6.0",
     isVersionSelectorDisabled: false,
     setVersionValue: (value) => set(() => ({ versionValue: value })),
     setIsVersionSelectorDisabled: (value) =>