title: Jetpack Compose Coil Preload
body: <p>I want to load the image on the spash screen so that I can set the request result to the background on other screens using the coil, but I have not been able to fully realize this in the coil. How can I save the result of my coil request to Cahce and use this result on other screens?</p>
  <p>Splash Screen</p>
  <pre><code>val imageLoader = ImageLoader.Builder(this)
          .memoryCache {
              MemoryCache.Builder(this)
                  .maxSizePercent(0.25)
                  .strongReferencesEnabled(true)
                  .build()
          }
              
              
          .diskCache {
              DiskCache.Builder()
                  .directory(this.cacheDir.resolve(&quot;image_cache&quot;))
                  .maxSizePercent(0.02)
                  .build()
          }
          .build()
  </code></pre>
  <p>and I used like this on splash</p>
  <pre><code>    val context = LocalContext.current
      val request = ImageRequest.Builder(context)
          .memoryCacheKey(Constants.Cache.BACKGROUND_IMAGE_KEY)
          .data(&quot;https://www.example/image1.jpg&quot;)
          .target(
              onSuccess = {
                  viewModel.skipImageRequest()
              },
              onError = {
                  viewModel.skipImageRequest()
              }
          )
          .build()
      imageLoader.enqueue(request)
  </code></pre>
  <p>in another screen that I want to use image</p>
  <pre><code>@Composable
  fun BackgroundImage(
      model: Any?,
      contentDescription: String? = &quot;&quot;,
      modifier: Modifier = Modifier.fillMaxSize(),
      //placeholder: Painter? = painterResource(R.drawable.bg_placeholder),
      error: Painter? = painterResource(R.drawable.bg_placeholder),
      fallback: Painter? = painterResource(R.drawable.bg_placeholder),
      alignment: Alignment = Alignment.Center,
      contentScale: ContentScale = ContentScale.FillBounds
  ) {
      AsyncImage(
          model = ImageRequest.Builder(LocalContext.current)
              .data(&quot;https://www.example/image1.jpg&quot;)
              .placeholderMemoryCacheKey(Constants.Cache.BACKGROUND_IMAGE_KEY)
              .build(),
          contentDescription = contentDescription,
          modifier = modifier,
          //placeholder = placeholder,
          error = error,
          fallback = fallback,
          alignment = alignment,
          contentScale = contentScale,
      )
  }
  </code></pre>
  <p>There is an always problem the placeholder image is shown in initialize of page I could not construct a structure where the placeholder is not visible while the image is being loaded and the image is read and used directly from the cahce.</p>
  <p>I would be very happy if you support</p>