From 81e114712f5ac8fa5b43285ef4b46636ed6ff5fc Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Wed, 23 Jul 2025 16:28:28 -0400 Subject: [PATCH 1/5] fix(SelectPanel): add loading state to stories --- .../SelectPanel.features.stories.tsx | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx index 0985e40e563..7d07671f763 100644 --- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx @@ -1,4 +1,4 @@ -import React, {useState, useRef} from 'react' +import React, {useState, useRef, useEffect} from 'react' import type {Meta, StoryObj} from '@storybook/react-vite' import Box from '../Box' import {Button} from '../Button' @@ -557,6 +557,7 @@ export const AsyncFetch: StoryObj = { const [open, setOpen] = useState(false) const filterTimerId = useRef(null) const {safeSetTimeout, safeClearTimeout} = useSafeTimeout() + const [loading, setLoading] = useState(true) const [query, setQuery] = useState('') const fetchItems = (query: string) => { @@ -565,11 +566,20 @@ export const AsyncFetch: StoryObj = { setQuery(query) } + setLoading(true) filterTimerId.current = safeSetTimeout(() => { setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(query.toLowerCase()))) + setLoading(false) }, 2000) as unknown as number } + useEffect(() => { + filterTimerId.current = safeSetTimeout(() => { + setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(query.toLowerCase()))) + setLoading(false) + }, 2000) as unknown as number + }, []) + const onOpenChange = (value: boolean) => { setOpen(value) fetchItems('') @@ -600,6 +610,7 @@ export const AsyncFetch: StoryObj = { height={height} initialLoadingType={initialLoadingType} width="medium" + loading={loading} message={filteredItems.length === 0 ? NoResultsMessage(query) : undefined} /> ) @@ -679,20 +690,27 @@ export const CustomisedNoResults: StoryObj = { const [open, setOpen] = useState(false) const filterTimerId = useRef(null) const {safeSetTimeout, safeClearTimeout} = useSafeTimeout() - const [loading, setLoading] = useState(false) + const [loading, setLoading] = useState(true) const onFilterChange = (value: string) => { setFilterValue(value) if (filterTimerId.current) { safeClearTimeout(filterTimerId.current) } - setLoading(true) + setLoading(true) filterTimerId.current = safeSetTimeout(() => { setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(value.toLowerCase()))) setLoading(false) }, 2000) as unknown as number } + useEffect(() => { + filterTimerId.current = safeSetTimeout(() => { + setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(filterValue.toLowerCase()))) + setLoading(false) + }, 2000) as unknown as number + }, []) + return ( Date: Wed, 23 Jul 2025 16:29:23 -0400 Subject: [PATCH 2/5] Create selfish-papayas-smoke.md --- .changeset/selfish-papayas-smoke.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/selfish-papayas-smoke.md diff --git a/.changeset/selfish-papayas-smoke.md b/.changeset/selfish-papayas-smoke.md new file mode 100644 index 00000000000..aefecc7ceee --- /dev/null +++ b/.changeset/selfish-papayas-smoke.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix(SelectPanel): add loading state to stories From cd6396fe297760b965b0cc405fe8144eef595d83 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Wed, 23 Jul 2025 16:44:19 -0400 Subject: [PATCH 3/5] lint --- packages/react/src/SelectPanel/SelectPanel.features.stories.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx index 7d07671f763..d237e3670c8 100644 --- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx @@ -578,6 +578,7 @@ export const AsyncFetch: StoryObj = { setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(query.toLowerCase()))) setLoading(false) }, 2000) as unknown as number + // eslint-disable-next-line react-hooks/exhaustive-deps }, []) const onOpenChange = (value: boolean) => { @@ -709,6 +710,7 @@ export const CustomisedNoResults: StoryObj = { setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(filterValue.toLowerCase()))) setLoading(false) }, 2000) as unknown as number + // eslint-disable-next-line react-hooks/exhaustive-deps }, []) return ( From b9615969135e274c7b04a59052057d2062505d7c Mon Sep 17 00:00:00 2001 From: francinelucca <40550942+francinelucca@users.noreply.github.com> Date: Wed, 23 Jul 2025 21:07:23 +0000 Subject: [PATCH 4/5] test(vrt): update snapshots --- ...Keybinding-Hint-light-tritanopia-linux.png | Bin 5952 -> 5560 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-tritanopia-linux.png index 9d0b028758d6696e0c131ef7840ac466e106c960..ed7582a58e9c90f86b1e7a5cd9e9ac2d93bff6d9 100644 GIT binary patch literal 5560 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 cD=wJLJ04&CXv+wEh5^7qS5KFk{U?6 Date: Wed, 23 Jul 2025 17:20:35 -0400 Subject: [PATCH 5/5] Revert "test(vrt): update snapshots" This reverts commit b9615969135e274c7b04a59052057d2062505d7c. --- ...Keybinding-Hint-light-tritanopia-linux.png | Bin 5560 -> 5952 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Keybinding-Hint-light-tritanopia-linux.png index ed7582a58e9c90f86b1e7a5cd9e9ac2d93bff6d9..9d0b028758d6696e0c131ef7840ac466e106c960 100644 GIT binary patch literal 5952 zcmeI0c~nzZ9>*_w6ssb3RItc0)}qKFZ3V+(j0;PZ$|e{jLaYmmLRca~4N078K~SJp z76DlbBC>=iJ0vDnfv89zh>3-S2nZ1{31JIld-HVW*v>ig*Zeo< zsgmfV?!pvBkitgUSy6s@7$>HBYF~S%96>riQS1Rl2Z+!*0Hl`G1X3={I_F<_pRdfI zqG&agHpja~Jqf%~R)%q}_i!EnJyqwoNOX02hVvkP98SS&a3M@x(k=yDBRIa#_=_)S}pqa1*>`}s@3-W4(W z0Bm-GlKQbC=NYEFx09+7E+-mwq#=Kpf3b6$SDv>b7=TAQqu3Ty^ZRQhVdn;#6lFPv z{8(jw+@yyPULc2Jm6cqK!$hA_CJSg7^1{@q43ta?DSAq=ipQh&{c8ZYw}_Ohm2zh( zKiAcVUV9;kB3}Y74OWlEV8hQ5NQ;#v79HstL7;RQ01uB*aGfo)GibBvqIInF3JyGg zy-j;o&fIYI2qtzFI0E2pWe@EWLz=tuH(WDpi4*Ar=*%E*&BGFSHkl>PHGH{LD5c}s zJ5o&f=gI8s0%Z|~ zCK|>J2GT?1?`3J^*omH+>g69o7}O9beiy$>{8}!Nte=5H*>7a}W1isk}{|F81g)<}UgJaH*yZ33FbWz=n$} zYd@iLmCdv}J9Js!CRo*$npL$6fyi<4J$!xRp2UgFXLTW6&2LnW$piy7WNLVm?%#lXEq--pT1GsISR zeI>9QfhF|jgh{&62Ghv>^9eR;W!&KnfK-FA*?^lSy&ZMt@8D zTQIa2vrSFptc*Rf*F#&J)pH#TVzQo@Ke~@X{PA!FUI*;;>MIp`51fC|a~Z0pQlY7O z)Vtv?0r;izg_YdH09kvESHtCUeM;RJ8bwkSV;Y^m>)~8ga*&dTjSLUZCC~h{6lz&0 zSyk@kEMA2Uj(ZnPG}71LxyN4SC#^R9HlZgy9<#el zKA0VeDr^vg&$W2vvB0sJ1(?vMmdiTV?puH)iUAU;o(2PUv2W zqs=g=%e-`3_=F7!q*?Z<*5KO<8=2;D(=+pgVl#)L^&HfC4 z^ws9VY&?h0+=z&I-kfqId(YzAE`%TejYh;gUSQ=|+oTSMqObyQEcx**j@aGvR&;L% zLdb{vD6uHS9^HQp3yBx;wzQLyGiYnfVx83<`FM>j9A5YAK%|XGS1v$_>-Aspcyjfq zd!G~+N#UgHS})38-rRb1^ z@gL9+s2eLAaZ59Dh(6)7zC3a2?cbUTN&OXFU6@11*TS<{VJ^gzpCA~6{ryg{ZCB4W zTvXGU+fz>tBB1#^YA{khoYBzO7)(&>>83}JlwxNoLo`oTXxKrty!?FS+$67^VykXr zS!O-|#vS2b^=d#ur*@XZ$=&@{>)D3>-)yhvJCubyF+Mwyd^cXbeJ(OGYeP3uT?Iky z6InsWzkr#~G*u_{i=`3b&DUUW>qb|J_&F!lt>{YEhKlg85nISo-sJZOEnYcK*~EPq zc$ovslQqtX5gx6mCM>pp6s7SOPKg-y1J)YKe~9q25f<-H5yCPxHw+5MKiKNuaSTo| zzdISr>p~0EL*wPVkXyKKXWrL^bUP`dz2Ho2J~@S#Tq{Y46t_AWs*aWUR&;&WV1HsS z#4;sCzkT|7G64>s#j(&~hTyTTSs;BOWrGzu5{KJCsGLswua3m}=xMX>5PfiTn8=T5 z@Pp6&#o+#x8?}|69A6s{Eeu*1KJA*dFlb@W!T|q1YK5Q`f>sDxA!s+xe?3&wy5j${ cD=wJLJ04&CXv+wEh5^7qS5KFk{U?6M2D?b z83!dOOVo^_MR-V(tHS>t2yb?oC$M3lalm5+fKBHP zhadPjyGAXID{UA((5)rn6*V=(*KYPyZcOuObH3UZhELhEG4;{Qe{9`4_Tu9D!yBUh z8jH`JZ+%-GaeSlWRva$e`^gvV>{Wwd>JN{s*>|+*{@KKB?*-6rh+NTROz`#xf<95E z4`Q&?6%&N9sa%WVbYAM^XUZj*NxbDLon{9>H@TDsK#wHoFd2 zppOFJJi)DDRC&?bKO~FKf7Ont(RHzDB-AYDlVzGtx|kr_BYIH1KIb95Lh$8=@0IeOsR7NnI>sjo+{b06YB+{(hdec3g;AoWonyv(`zp#mM3; zmW2S&w2A&gU=dV!X$)7{iUscL)EFZeoWPG@LwZ4FgysgGWHsQ1(x-^GW}bmF8?tHwXRFBx{fW<^^E5cv$zr@&aqvRIy(5Xu9X||suME(mm3}6teO)lG_*dN|Zft_ITv+4}4>1RmF`aj~@50o2H=(+Ag?^du8!&gFHhCTB-qYNl9^e&OHx^IY=f2Wk&BTQ9 zdRv=N(L!)rUS8(5mWr}`J!drVrH=-n*7LIW10;2Q3hwJPCeFR;zUtCG!C^ zx+_KAvuv4IEUvl0ZSi9qt#{pQe&X)T9Bhj5sjm?1#NBS?#-v&4RsHuW1jC1yp-TL* zx-fNeYpe@zw`aM3`D=d*=kcxHq?Va8zNc9DA!TEQHk%#qtekAk&F7H6-v)U;P&sAo zDSN9LUD-P=zjNP^+ZOXa>}xhAgp{c0n^(#0VaXp<*9Ozb98WS?&I+72q>{K&OGnUx ztHY^=lhGzrCnVJBxGSbi#X$Pk)DNmPDpieGiYn(S*b&*#%oz@D zos!TRdvtq6|9h3nC8K$y>EQ?!ldlc1k`d>sFY(G1pW7jtZ>urnb_F;tmk&JR1S_+lLNumW@OQ0 z(s|TB%K?~kN9hH5Q`ZDf+aXn*P+K*uSG5>c)Knbwh9Vb9NA*E(7Wqg11!hPhw^z($ zo!fhf9e!^}Ajf&bLIV0U*I*&+ov%~&x?h$r7^ZQM%W1O0UCn{S=9u^Cy--cD39GyW z|B_SMH+JCG>$#P6Fh0t|9ope9Uk-oqx@nvEzuAA-`e^Ipf4_URvB$<98+-n