Merge pull request #55 from lumpinif/main

[fix] Improved instruction selector loading state handling
richards199999 · Dec 3, 2024 · 30dd539 · 30dd539
2 parents 6c4f798 + 3c6f99d
commit 30dd539
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 84 deletions.
diff --git a/extensions/changelog.md b/extensions/changelog.md
@@ -2,6 +2,15 @@
 
 # Changelog of the extensions
 
+## fix: Instruction Selector Loading State - 12/3/2024 - @lumpinif
+
+### Bug Fixes
+
+- Improved loading state handling in instruction selector
+  - Fixed loading state visibility during data fetching
+  - Added empty state check to prevent UI flickering
+  - Enhanced state transitions between loading and loaded states
+
 ## feat: Instruction Selector - 12/2/2024 - @lumpinif
 
 ### New Feature Implementation

diff --git a/extensions/chrome/package.json b/extensions/chrome/package.json
@@ -1,6 +1,6 @@
 {
   "name": "thinking-claude",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Chrome extension for letting Claude think like a real human",
   "type": "module",
   "scripts": {

diff --git a/extensions/chrome/public/manifest.json b/extensions/chrome/public/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Thinking Claude",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Chrome extension for letting Claude think like a real human",
   "background": {
     "service_worker": "background.js"

diff --git a/extensions/chrome/src/components/instruction-selector/index.tsx b/extensions/chrome/src/components/instruction-selector/index.tsx
@@ -77,92 +77,92 @@ export function InstructionSelect() {
   const selectedInstruction = instructions.find((inst) => inst.value === value)
   const displayedInstruction = hoveredInstruction || selectedInstruction
 
-  if (isLoading) {
-    return <LoadingState isLoading={isLoading} />
-  }
-
   return (
     <div className="tc-min-w-24">
-      <Select
-        key={key}
-        value={value}
-        onValueChange={(value) => {
-          handleInstructionClick(
-            instructions.find((inst) => inst.value === value)!
-          )
-        }}
-      >
-        <SelectTrigger className="inline-flex items-center justify-center relative shrink-0 ring-offset-2 ring-offset-bg-300 ring-accent-main-100 focus-visible:outline-none focus-visible:ring-1 tc-shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none disabled:drop-shadow-none max-w-full min-w-0 pl-1.5 pr-1 h-7 ml-0.5 mr-1 hover:bg-bg-200 hover:border-border-400 border-0.5 text-sm rounded-md border-transparent transition text-text-500 hover:text-text-200 font-tiempos !tc-font-normal tc-gap-x-1">
-          <SelectValue placeholder="Let Claude think" />
-        </SelectTrigger>
-        <SelectContent className="z-50 bg-bg-200 backdrop-blur-xl border-0.5 border-border-300 rounded-xl min-w-[12rem] overflow-hidden p-1 text-text-200 shadow-[0_0_0_0.5px_rgba(0,0,0,0.1),0_0_20px_rgba(0,0,0,0.05),0_1px_5px_rgba(0,0,0,0.1)] w-64 sm:w-[28rem] md:tc-w-[32rem] !z-30">
-          <div className="sm:flex justify-between items-center flex-1 text-xs font-medium text-text-300 px-1.5 pt-1 pb-1.5 min-h-5">
-            <div className="translate-y-[0.5px]">
-              Which model instruction should Claude use?
-            </div>
-            <a
-              href="https://github.com/richards199999/Thinking-Claude"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Badge
-                variant="default"
-                className="border-0.5 border-border-300 tc-flex tc-items-center tc-gap-2 tc-cursor-pointer hover:!bg-accent-main-100 hover:!text-oncolor-100 hover:!border-transparent transition tc-font-normal tc-text-xs tc-flex-nowrap"
+      {isLoading || instructions.length === 0 ? (
+        <LoadingState isLoading={true} />
+      ) : (
+        <Select
+          key={key}
+          value={value}
+          onValueChange={(value) => {
+            handleInstructionClick(
+              instructions.find((inst) => inst.value === value)!
+            )
+          }}
+        >
+          <SelectTrigger className="inline-flex items-center justify-center relative shrink-0 ring-offset-2 ring-offset-bg-300 ring-accent-main-100 focus-visible:outline-none focus-visible:ring-1 tc-shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none disabled:drop-shadow-none max-w-full min-w-0 pl-1.5 pr-1 h-7 ml-0.5 mr-1 hover:bg-bg-200 hover:border-border-400 border-0.5 text-sm rounded-md border-transparent transition text-text-500 hover:text-text-200 font-tiempos !tc-font-normal tc-gap-x-1">
+            <SelectValue placeholder="Let Claude think" />
+          </SelectTrigger>
+          <SelectContent className="z-50 bg-bg-200 backdrop-blur-xl border-0.5 border-border-300 rounded-xl min-w-[12rem] overflow-hidden p-1 text-text-200 shadow-[0_0_0_0.5px_rgba(0,0,0,0.1),0_0_20px_rgba(0,0,0,0.05),0_1px_5px_rgba(0,0,0,0.1)] w-64 sm:w-[28rem] md:tc-w-[32rem] !z-30">
+            <div className="sm:flex justify-between items-center flex-1 text-xs font-medium text-text-300 px-1.5 pt-1 pb-1.5 min-h-5">
+              <div className="translate-y-[0.5px]">
+                Which model instruction should Claude use?
+              </div>
+              <a
+                href="https://github.com/richards199999/Thinking-Claude"
+                target="_blank"
+                rel="noopener noreferrer"
               >
-                <span
-                  title="Open-souced on GitHub"
-                  className="tc-flex tc-items-center tc-justify-center"
+                <Badge
+                  variant="default"
+                  className="border-0.5 border-border-300 tc-flex tc-items-center tc-gap-2 tc-cursor-pointer hover:!bg-accent-main-100 hover:!text-oncolor-100 hover:!border-transparent transition tc-font-normal tc-text-xs tc-flex-nowrap"
                 >
-                  <GitHubLogoIcon className="tc-size-3" />
-                </span>
-                <span className="tc-flex tc-items-center tc-justify-center">
-                  {starsCount && (
-                    <span
-                      className="tc-text-xs"
-                      title={`${starsCount.toLocaleString()} stars`}
-                    >
-                      {formatStarCount(starsCount)}
-                    </span>
-                  )}
-                  <StarFilledIcon className="tc-size-3" />
-                </span>
-              </Badge>
-            </a>
-          </div>
-          <div className="grid sm:grid-cols-2 tc-gap-2 mt-0.5 pb-1 px-1">
-            <div className="min-h-0">
-              <div className="overflow-x-visible overflow-y-auto scroll-pb-6 min-h-[0px] [scrollbar-color:hsl(var(--text-500))] scroll-smooth overscroll-contain [-webkit-overflow-scrolling:touch] [&::-webkit-scrollbar]:mt-4 [&::-webkit-scrollbar]:w-[0.25rem] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-track]:my-1 [&::-webkit-scrollbar-thumb]:rounded-[1em] [&::-webkit-scrollbar-thumb]:border-[0.25rem] [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-clip-padding [&::-webkit-scrollbar-thumb]:bg-text-500/80 [&::-webkit-scrollbar-thumb:hover]:bg-text-500 sm:mr-1 min-h-40 max-h-64">
-                <SelectGroup>
-                  {instructions.map((instruction) => (
-                    <div
-                      key={instruction.value}
-                      onMouseEnter={() => setHoveredInstruction(instruction)}
-                      onMouseLeave={() => setHoveredInstruction(null)}
-                    >
-                      <InstructionItem
-                        value={instruction.value}
-                        label={instruction.label}
-                      />
-                    </div>
-                  ))}
-                  <button
-                    onClick={handleClear}
-                    className="py-1 px-2 rounded-md cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis grid grid-cols-[minmax(0,_1fr)_auto] gap-2 items-center outline-none select-none [&[data-highlighted]]:bg-bg-300 [&[data-highlighted]]:text-text-000 bg-transparent border-0.5 border-border-300 hover:!bg-accent-main-100 hover:!text-oncolor-100 hover:!border-transparent transition mb-1 mt-4 !rounded-lg text-center text-sm font-medium w-full"
+                  <span
+                    title="Open-souced on GitHub"
+                    className="tc-flex tc-items-center tc-justify-center"
                   >
-                    Clear selection
-                  </button>
-                </SelectGroup>
-              </div>
+                    <GitHubLogoIcon className="tc-size-3" />
+                  </span>
+                  <span className="tc-flex tc-items-center tc-justify-center">
+                    {starsCount && (
+                      <span
+                        className="tc-text-xs"
+                        title={`${starsCount} stars`}
+                      >
+                        {formatStarCount(starsCount)}
+                      </span>
+                    )}
+                    <StarFilledIcon className="tc-size-3" />
+                  </span>
+                </Badge>
+              </a>
             </div>
-            <div className="flex flex-col">
-              <InstructionDescription
-                error={error}
-                selectedInstruction={displayedInstruction}
-              />
+            <div className="grid sm:grid-cols-2 tc-gap-2 mt-0.5 pb-1 px-1">
+              <div className="min-h-0">
+                <div className="overflow-x-visible overflow-y-auto scroll-pb-6 min-h-[0px] [scrollbar-color:hsl(var(--text-500))] scroll-smooth overscroll-contain [-webkit-overflow-scrolling:touch] [&::-webkit-scrollbar]:mt-4 [&::-webkit-scrollbar]:w-[0.25rem] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-track]:my-1 [&::-webkit-scrollbar-thumb]:rounded-[1em] [&::-webkit-scrollbar-thumb]:border-[0.25rem] [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-clip-padding [&::-webkit-scrollbar-thumb]:bg-text-500/80 [&::-webkit-scrollbar-thumb:hover]:bg-text-500 sm:mr-1 min-h-40 max-h-64">
+                  <SelectGroup>
+                    {instructions.map((instruction) => (
+                      <div
+                        key={instruction.value}
+                        onMouseEnter={() => setHoveredInstruction(instruction)}
+                        onMouseLeave={() => setHoveredInstruction(null)}
+                      >
+                        <InstructionItem
+                          value={instruction.value}
+                          label={instruction.label}
+                        />
+                      </div>
+                    ))}
+                    <button
+                      onClick={handleClear}
+                      className="py-1 px-2 rounded-md cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis grid grid-cols-[minmax(0,_1fr)_auto] gap-2 items-center outline-none select-none [&[data-highlighted]]:bg-bg-300 [&[data-highlighted]]:text-text-000 bg-transparent border-0.5 border-border-300 hover:!bg-accent-main-100 hover:!text-oncolor-100 hover:!border-transparent transition mb-1 mt-4 !rounded-lg text-center text-sm font-medium w-full"
+                    >
+                      Clear selection
+                    </button>
+                  </SelectGroup>
+                </div>
+              </div>
+              <div className="flex flex-col">
+                <InstructionDescription
+                  error={error}
+                  selectedInstruction={displayedInstruction}
+                />
+              </div>
             </div>
-          </div>
-        </SelectContent>
-      </Select>
+          </SelectContent>
+        </Select>
+      )}
     </div>
   )
 }
diff --git a/extensions/chrome/src/hooks/use-model-instructions.ts b/extensions/chrome/src/hooks/use-model-instructions.ts
@@ -23,7 +23,6 @@ export const useModelInstructions = () => {
 
   const fetchModelInstructions = async (signal: AbortSignal) => {
     try {
-      setIsLoading(true)
       setError(null)
 
       const response = await fetch(GITHUB_API_URL, { signal })
@@ -95,8 +94,6 @@ export const useModelInstructions = () => {
         err instanceof Error ? err.message : "Failed to load model instructions"
       )
       setInstructions([])
-    } finally {
-      setIsLoading(false)
     }
   }
 
@@ -140,6 +137,11 @@ export const useModelInstructions = () => {
           fetchStarsCount(signal),
           fetchModelInstructions(signal),
         ])
+      } catch (err) {
+        // Handle any errors from the parallel fetches
+        if (err instanceof Error && err.name !== "AbortError") {
+          console.error("Error during parallel fetches:", err)
+        }
       } finally {
         setIsLoading(false)
       }