JetSmartFilters Hide widget before filtering (also optionally hide when no filter is applied anymore). All credits to Crocoblock, just saving this for myself. Add the class to the listing grid that you want to hide.

jsf-hide-before-filter.html

<style>

    body:not(.elementor-editor-active) .hide-listing {
        display: none;
        height: 0;
    }
    
</style>

<script>

	document.addEventListener( 'jet-smart-filters/inited', init );

	function hideProvider( $provider, parentSelector ) {
		$provider.closest( parentSelector ).addClass( 'hide-listing' );
	}

	function showProvider( $provider, parentSelector ) {
		$provider.closest( parentSelector ).removeClass( 'hide-listing' );
	}

	function init() {
			
		for ( const groupName in window.JetSmartFilters.filterGroups ) {
			
			const filterGroup = window.JetSmartFilters.filterGroups[ groupName ],
			      $provider   = filterGroup?.$provider,
			      query       = filterGroup?.currentQuery || {};
			
			if ( ! $provider.closest('.hide-before-filter')?.length ) {
				continue;
			}
			
			if ( ! Object.keys( query ).length ) {
				hideProvider( $provider, '.hide-before-filter' );
			} else {
				showProvider( $provider, '.hide-before-filter' );
			}
			
		}
		
		window.JetSmartFilters.events.subscribe( 'ajaxFilters/updated', function( provider, queryId ) {
			
			const filterGroup = window.JetSmartFilters.filterGroups[ provider + '/' + queryId ],
			      $provider   = filterGroup.$provider,
			      query       = filterGroup.currentQuery || {};
			
			if ( ! Object.keys( query ).length ) {
				hideProvider( $provider, '.hide-before-filter.hide-on-reset' );
			} else {
				showProvider( $provider, '.hide-before-filter' );
			}
			
		} );
	
	}
	
</script>