diff --git a/webapp/src/projects.tsx b/webapp/src/projects.tsx
index 8cdf9bfa801b..04b89fea569a 100644
--- a/webapp/src/projects.tsx
+++ b/webapp/src/projects.tsx
@@ -430,6 +430,33 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
             ? this.getLocalProjectDescription(selectedSearchProjectHeader) || selectedSearchCard?.description
             : selectedSearchCard?.description;
         const canImport = !!(pxt.appTarget.compile || (pxt.appTarget.cloud && pxt.appTarget.cloud.sharing && pxt.appTarget.cloud.importing)) && !searchMode;
+        const searchResultsContent = hasSearchQuery
+            ? searchResults.length
+                ? searchResults.map((scr, index) =>
+                    <React.Fragment key={`search-${scr.youTubeId || scr.name || scr.url}-${index}`}>
+                        <ProjectsCodeCard
+                            className={`${scr.projectHeader ? "" : "example"} ${searchSelectedIndex === index ? "selected" : ""}`.trim()}
+                            { ...scr }
+                            description="" // the description would show up below the card in the view; remove it, shows up in details.
+                            scr={scr.projectHeader || scr} index={index}
+                            onCardClick={this.handleSearchCardClick}
+                            selected={!scr.directOpen ? searchSelectedIndex === index : undefined}
+                        />
+                        {selectedSearchCard && searchSelectedIndex === index && <div ref="searchDetailView" className="detailview search-detailview">
+                            <ProjectsDetail parent={this.props.parent}
+                                { ...selectedSearchCard }
+                                name={selectedSearchCard.name}
+                                cardType={selectedSearchCard.cardType}
+                                key={'detailsearch' + selectedSearchCard.name}
+                                description={selectedSearchDescription}
+                                scr={selectedSearchCard}
+                                onClick={this.handleSearchDetailClick}
+                            />
+                            <sui.CloseButton onClick={this.closeSearchDetail} />
+                        </div>}
+                    </React.Fragment>)
+                : <p className="ui grey inverted segment">{lf("No search results found.")}</p>
+            : null;
 
         // lf("Make")
         // lf("Code")
@@ -513,31 +540,7 @@ export class Projects extends auth.Component<ISettingsProps, ProjectsState> {
             </div>
             {searchMode && <div key={`search_gallerysegment`} className="ui segment gallerysegment search-segment" role="region" aria-label={lf("Search results")}>
                 <div className="content search-results-grid">
-                    {!hasSearchQuery ? <p className="ui grey inverted segment search-empty-state">{lf("Start typing to search tutorials, examples, and projects.")}</p>
-                        : searchResults.length ? searchResults.map((scr, index) =>
-                            <React.Fragment key={`search-${scr.youTubeId || scr.name || scr.url}-${index}`}>
-                                <ProjectsCodeCard
-                                    className={`${scr.projectHeader ? "" : "example"} ${searchSelectedIndex === index ? "selected" : ""}`.trim()}
-                                    { ...scr }
-                                    description="" // the description would show up below the card in the view; remove it, shows up in details.
-                                    scr={scr.projectHeader || scr} index={index}
-                                    onCardClick={this.handleSearchCardClick}
-                                    selected={!scr.directOpen ? searchSelectedIndex === index : undefined}
-                                />
-                                {selectedSearchCard && searchSelectedIndex === index && <div ref="searchDetailView" className="detailview search-detailview">
-                                    <ProjectsDetail parent={this.props.parent}
-                                        { ...selectedSearchCard }
-                                        name={selectedSearchCard.name}
-                                        cardType={selectedSearchCard.cardType}
-                                        key={'detailsearch' + selectedSearchCard.name}
-                                        description={selectedSearchDescription}
-                                        scr={selectedSearchCard}
-                                        onClick={this.handleSearchDetailClick}
-                                    />
-                                    <sui.CloseButton onClick={this.closeSearchDetail} />
-                                </div>}
-                            </React.Fragment>
-                        ) : <p className="ui grey inverted segment">{lf("No search results found.")}</p>}
+                    {searchResultsContent}
                 </div>
             </div>}
             {!searchMode && <>